Web Page Authorized Login

An overview of the

Members’ identity information can be obtained from the webpage opened by the wechat terminal of the enterprise, so as to avoid the link of login. URL links in enterprise applications (including custom menus or links in messages) can obtain the UserId of a member through the OAuth2.0 authentication interface.

Setting trusted Domain Name

The domain name of the URL must match Trusted Domain name in the enterprise application Settings. Otherwise, error redirect_URI parameter is displayed. For the matching rule, see Trust Check Rule. Therefore, you need to configure the trusted domain name of the application.

Log in to the enterprise management back-end, select the “Enterprise Application” TAB, enter the application that needs to use web authorization, and edit the “Trusted Domain name” form item. This option will be used for security verification of web OAuth2.0 authorization. Please note that this is the domain name, not the URL, so do not include protocol headers such as http://.

The front-end process

  • Call the backend interface to get the construct link, and JS opens the construct link to get the code
  • The backend interface is called to get the userID of the employee based on the code parameter
// Construct a link
https://open.weixin.qq.com/connect/oauth2/authorize?appid=CORPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&agen tid=AGENTID&state=STATE#wechat_redirect

// Open the link to jump toredirect_uri? Code = CODE&state = STATE such as:https://vi.com/home?code=bQIyNHUkJenaDKD9OJH3TB-Jva1_4JHBeGvDEUUfuYXmE&state=STATE
Copy the code

Project Case:

async created(){
   // If the user opens the link for the first time without code, call the interface to get OAuth2 link
   if (!this.$route.query.code) {
      this.getOAuth()
   }
   // OAuth2 link with code
   else {
      // No UserId, use code to get UserId
      if (!localStorage.UserId) {
        await this.getUserID()
      }
      // If you have a token, then request another interface
      this.getList() 
   }
},
methods: {/* Get the OAuth2 link, open */
    getOAuth() {
      const urlHref = location.href
      // Pass the current URL to the back end
      getOAuth(urlHref).then(res= > {
        const url = res.asstokenUrl
        // Jump to construct link
        url && (location.href = url)
      })
    },
    /* Get UserId */ according to the code that constructed the link
    getUserID() {
      return new Promise(resolve= > {
        getUserID({
          code: this.$route.query.code
        }).then(res= > {
          if (res.errcode == 0) {
            localStorage.UserId = res.UserId
            resolve()
          }
          // Failed to get the UserId
          else {
            Toast({
              type: 'fail'.message: 'Authentication expired! '.duration: 3000})})})},}Copy the code