【一】微信公众号之扫码登录

红太狼 2023-01-14 05:58 446阅读 0赞

# 微信公众号之扫码登录 #

>  原来公司的官网就支持账号密码、手机验证码、QQ扫码授权、微信扫码授权等多种登录方式。今天要分享的就是关于微信扫码授权登录的原理。

### 一、准备工作 ###

使用的是[微信登录功能][Link 1]实现的，需要先在微信开放平台注册开发者帐号，并拥有一个已审核通过的网站应用，并获得相应的AppID和AppSecret，申请微信登录且通过审核后，可开始接入流程。

### 二、授权流程说明 ###

微信授权登录让微信用户使用微信身份安全登录第三方应用或网站，当微信用户授权登录接入微信的第三方应用后，第三方就可以获取到用户的接口调用凭证（access\_token）,通过access\_token可以进行微信开放平台授权关系接口调用，从而可实现获取微信用户基本开放信息和帮助用户实现基础开放功能等。微信OAuth2.0授权登录目前支持authorization\_code模式，适用于拥有server端的应用授权。该模式整体流程为：

1. 第三方发起微信授权登录请求，微信用户允许授权第三方应用后，微信会拉起应用或重定向到第三方网站，并且带上授权临时票据code参数；
    2. 通过code参数加上AppID和AppSecret等，通过API换取access_token；
    3. 通过access_token进行接口调用，获取用户基本数据资源或帮助用户实现基本操作。

获取access\_token时序图：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1phY2tfdHpo_size_16_color_FFFFFF_t_70_pic_center]

我们来捋一下整个流程

1.  先是用户来访问咋们的网站，然后点击微信登录。
2.  然后咋们就给他展示一个二维码，让他扫。
3.  等用户扫码后就会询问他是否同意，点击同意后，我们就可以拿到access\_token，获取该用户的一些基本信息，完成登录过程。最后跳转到指定的页面了。

### 三、具体接口 ###

*  **第一步：请求CODE**
    
     当用户点击微信登录后，我们要给他一个二维码，这个二维码是微信提供的，需要应用授权登录前请注意已获取相应网页授权作用域（scope=snsapi\_login），则可以通过在PC端打开以下链接：
    
        https://open.weixin.qq.com/connect/qrconnect?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect
    
    **参数说明**
    
    <table> 
     <thead> 
      <tr> 
       <th align="left">参数</th> 
       <th align="left">是否必须</th> 
       <th align="left">说明</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr> 
       <td align="left">appid</td> 
       <td align="left">是</td> 
       <td align="left">应用唯一标识</td> 
      </tr> 
      <tr> 
       <td align="left">redirect_uri</td> 
       <td align="left">是</td> 
       <td align="left">请使用urlEncode对链接进行处理</td> 
      </tr> 
      <tr> 
       <td align="left">response_type</td> 
       <td align="left">是</td> 
       <td align="left">填code</td> 
      </tr> 
      <tr> 
       <td align="left">scope</td> 
       <td align="left">是</td> 
       <td align="left">应用授权作用域，拥有多个作用域用逗号（,）分隔，网页应用目前仅填写snsapi_login</td> 
      </tr> 
      <tr> 
       <td align="left">state</td> 
       <td align="left">否</td> 
       <td align="left">用于保持请求和回调的状态，授权请求后原样带回给第三方。该参数可用于防止csrf攻击（跨站请求伪造攻击），建议第三方带上该参数，可设置为简单的随机数加session进行校验</td> 
      </tr> 
     </tbody> 
    </table>
    
    **返回说明**
    
    用户允许授权后，将会重定向到redirect\_uri的网址上，并且带上code和state参数
    
        redirect_uri?code=CODE&state=STATE
    
    若用户禁止授权，则重定向后不会带上code参数，仅会带上state参数
    
        redirect_uri?state=STATE
 *  **第二步：通过code获取access\_token**
    
    **通过code获取access\_token**
    
        https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code
    
    **参数说明**
    
    <table> 
     <thead> 
      <tr> 
       <th align="left">参数</th> 
       <th align="left">是否必须</th> 
       <th align="left">说明</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr> 
       <td align="left">appid</td> 
       <td align="left">是</td> 
       <td align="left">应用唯一标识，在微信开放平台提交应用审核通过后获得</td> 
      </tr> 
      <tr> 
       <td align="left">secret</td> 
       <td align="left">是</td> 
       <td align="left">应用密钥AppSecret，在微信开放平台提交应用审核通过后获得</td> 
      </tr> 
      <tr> 
       <td align="left">code</td> 
       <td align="left">是</td> 
       <td align="left">填写第一步获取的code参数</td> 
      </tr> 
      <tr> 
       <td align="left">grant_type</td> 
       <td align="left">是</td> 
       <td align="left">填authorization_code</td> 
      </tr> 
     </tbody> 
    </table>
    
    **返回说明**
    
    正确的返回：
    
        { 
        "access_token":"ACCESS_TOKEN", 
        "expires_in":7200, 
        "refresh_token":"REFRESH_TOKEN",
        "openid":"OPENID", 
        "scope":"SCOPE",
        "unionid": "o6_bmasdasdsad6_2sgVt7hMZOPfL"
        }
    
    **正确的返回参数说明**
    
    <table> 
     <thead> 
      <tr> 
       <th align="left">参数</th> 
       <th align="left">说明</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr> 
       <td align="left">access_token</td> 
       <td align="left">接口调用凭证</td> 
      </tr> 
      <tr> 
       <td align="left">expires_in</td> 
       <td align="left">access_token接口调用凭证超时时间，单位（秒）</td> 
      </tr> 
      <tr> 
       <td align="left">refresh_token</td> 
       <td align="left">用户刷新access_token</td> 
      </tr> 
      <tr> 
       <td align="left">openid</td> 
       <td align="left">授权用户唯一标识</td> 
      </tr> 
      <tr> 
       <td align="left">scope</td> 
       <td align="left">用户授权的作用域，使用逗号（,）分隔</td> 
      </tr> 
      <tr> 
       <td align="left">unionid</td> 
       <td align="left">当且仅当该网站应用已获得该用户的userinfo授权时，才会出现该字段。</td> 
      </tr> 
     </tbody> 
    </table>
    
    错误返回样例：
    
        {"errcode":40029,"errmsg":"invalid code"}
 *  **第三步：通过access\_token和openid获取获取用户个人信息（UnionID机制）**
    
    **接口说明：**
    
     此接口用于获取用户个人信息。开发者可通过OpenID来获取用户基本信息。特别需要注意的是，如果开发者拥有多个移动应用、网站应用和公众帐号，可通过获取用户基本信息中的unionid来区分用户的唯一性，因为只要是同一个微信开放平台帐号下的移动应用、网站应用和公众帐号，用户的unionid是唯一的。换句话说，同一用户，对同一个微信开放平台下的不同应用，unionid是相同的。请注意，在用户修改微信头像后，旧的微信头像URL将会失效，因此开发者应该自己在获取用户信息后，将头像图片保存下来，避免微信头像URL失效后的异常情况。
    
    **请求说明**
    
        http请求方式: GET
        https://api.weixin.qq.com/sns/userinfo?access_token=ACCESS_TOKEN&openid=OPENID
    
    **参数说明**
    
    <table> 
     <thead> 
      <tr> 
       <th align="left">参数</th> 
       <th align="left">是否必须</th> 
       <th align="left">说明</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr> 
       <td align="left">access_token</td> 
       <td align="left">是</td> 
       <td align="left">调用凭证</td> 
      </tr> 
      <tr> 
       <td align="left">openid</td> 
       <td align="left">是</td> 
       <td align="left">普通用户的标识，对当前开发者帐号唯一</td> 
      </tr> 
      <tr> 
       <td align="left">lang</td> 
       <td align="left">否</td> 
       <td align="left">国家地区语言版本，zh_CN 简体，zh_TW 繁体，en 英语，默认为zh-CN</td> 
      </tr> 
     </tbody> 
    </table>
    
    **返回说明：**
    
    正确的Json返回结果：
    
        {
        "openid":"OPENID",
        "nickname":"NICKNAME",
        "sex":1,
        "province":"PROVINCE",
        "city":"CITY",
        "country":"COUNTRY",
        "headimgurl": "https://thirdwx.qlogo.cn/mmopen/g3MonUZtNHkdmzicIlibx6iaFqAc56vxLSUfpb6n5WKSYVY0ChQKkiaJSgQ1dZuTOgvLLrhJbERQQ4eMsv84eavHiaiceqxibJxCfHe/0",
        "privilege":[
        "PRIVILEGE1",
        "PRIVILEGE2"
        ],
        "unionid": " o6_bmasdasdsad6_2sgVt7hMZOPfL"
        
        }
    
    <table> 
     <thead> 
      <tr> 
       <th align="left">参数</th> 
       <th align="left">说明</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr> 
       <td align="left">openid</td> 
       <td align="left">普通用户的标识，对当前开发者帐号唯一</td> 
      </tr> 
      <tr> 
       <td align="left">nickname</td> 
       <td align="left">普通用户昵称</td> 
      </tr> 
      <tr> 
       <td align="left">sex</td> 
       <td align="left">普通用户性别，1为男性，2为女性</td> 
      </tr> 
      <tr> 
       <td align="left">province</td> 
       <td align="left">普通用户个人资料填写的省份</td> 
      </tr> 
      <tr> 
       <td align="left">city</td> 
       <td align="left">普通用户个人资料填写的城市</td> 
      </tr> 
      <tr> 
       <td align="left">country</td> 
       <td align="left">国家，如中国为CN</td> 
      </tr> 
      <tr> 
       <td align="left">headimgurl</td> 
       <td align="left">用户头像，最后一个数值代表正方形头像大小（有0、46、64、96、132数值可选，0代表640*640正方形头像），用户没有头像时该项为空</td> 
      </tr> 
      <tr> 
       <td align="left">privilege</td> 
       <td align="left">用户特权信息，json数组，如微信沃卡用户为（chinaunicom）</td> 
      </tr> 
      <tr> 
       <td align="left">unionid</td> 
       <td align="left">用户统一标识。针对一个微信开放平台帐号下的应用，同一用户的unionid是唯一的。</td> 
      </tr> 
     </tbody> 
    </table>
    
    **建议：**
    
    开发者最好保存用户unionID信息，以便以后在不同应用中进行用户信息互通。
    
    错误的Json返回示例:
    
        {
        "errcode":40003,"errmsg":"invalid openid"
        }

[Link 1]: https://developers.weixin.qq.com/doc/oplatform/Website_App/WeChat_Login/Wechat_Login.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1phY2tfdHpo_size_16_color_FFFFFF_t_70_pic_center]: /images/20221022/b1126c302f8d43d3a453f8c3888ac3fc.png