Explication détaillée des étapes de traitement de connexion par code de numérisation développée par WeChat

De nombreux sites Web utilisent aujourd'hui le processus d'authentification de connexion par analyse de code de la plate-forme ouverte WeChat. Cela équivaut à confier l'authentification d'identité à un tiers plus faisant autorité pour l'authentification. Il n'est pas nécessaire de stocker le mot de passe de l'utilisateur sur le site Web de l'application. Cet article explique comment se connecter au site Web en fonction de la numérisation du code QR sur la plateforme ouverte WeChat.

1. Certification de la plateforme ouverte

Pour utiliser le processus de connexion par code scan du site Web, vous devez d'abord effectuer la certification de qualification de développeur du compte de la plateforme ouverte WeChat, soumettre les informations pertinentes et fournir 300 par année de frais de certification Yuan.

Après l'authentification et l'établissement des applications de site Web pertinentes, il y aura APPID et APPSecret pertinents. Ces paramètres clés peuvent être utilisés pour obtenir des informations utilisateur pertinentes.

L'interface des détails de l'application de l'application du site Web est la suivante.

L'ensemble de la plateforme ouverte donne l'impression qu'il n'y a pas grand-chose, mais elle nécessite une authentification payante pour utiliser ces fonctions, ce qui n'est pas très agréable.

La connexion par code scan que nous utilisons nécessite d'obtenir des informations utilisateur via une plateforme ouverte. Par conséquent, il est également nécessaire de définir le nom de domaine de l'interface pour obtenir les informations utilisateur de base, ce qui ne permettra pas d'obtenir les informations utilisateur. entraînera des erreurs de redirection.

Définissez le nom de domaine dans l'entrée de modification de [Autorisations d'interface] [Compte Web] [Autorisation de page Web pour obtenir les informations de base de l'utilisateur], comme indiqué dans la figure ci-dessous.

Entrez ensuite le nom de domaine du rappel d'autorisation dans la boîte de dialogue contextuelle.

Ce paramètre peut garantir que les informations utilisateur sont obtenues.

2. Instructions et utilisation spécifique de la numérisation du code QR pour se connecter

L'application Web WeChat login est un système de connexion autorisé WeChat OAuth2.0 construit sur la base de la norme de protocole OAuth2.0.

Avant d'effectuer WeChat OAuth2. Avant d'effectuer la connexion et l'accès autorisés à WeChat OAuth2.0, enregistrez un compte de développeur sur la plate-forme ouverte WeChat, disposez d'une application de site Web approuvée et obtenez l'AppID et l'AppSecret correspondants. connectez-vous et réussissez l’examen, vous pouvez démarrer le processus d’accès.

La connexion autorisée WeChat OAuth2.0 permet aux utilisateurs de WeChat d'utiliser leur identité WeChat pour se connecter en toute sécurité à des applications ou à des sites Web tiers une fois que l'utilisateur WeChat a autorisé et s'est connecté à l'application tierce qui a été connectée. vers WeChat OAuth2.0, le tiers peut obtenir l'utilisateur. Le certificat d'appel d'interface (access_token) peut être utilisé pour appeler l'interface de relation d'autorisation de la plate-forme ouverte WeChat via access_token, afin d'obtenir les informations ouvertes de base des utilisateurs de WeChat et d'aider les utilisateurs à réaliser fonctions ouvertes de base.

La connexion autorisée WeChat OAuth2.0 prend actuellement en charge le mode authorisation_code, qui convient à l'autorisation d'application côté serveur. Le processus global de ce modèle est le suivant :

1. Le tiers lance une demande de connexion d'autorisation WeChat Une fois que l'utilisateur WeChat autorise l'autorisation de l'application tierce, WeChat lancera l'application ou redirigera vers le tiers. site Web du parti et apportez le paramètre de code de ticket temporaire d'autorisation ; 2. Utilisez le paramètre de code plus AppID et AppSecret, etc., pour échanger contre access_token via l'API 3. Effectuez des appels d'interface via access_token pour obtenir les ressources de données de base de l'utilisateur ou. aider l'utilisateur à mettre en œuvre les opérations de base.

Obtenez le diagramme de séquence access_token :

À partir de la figure ci-dessus, nous pouvons avoir un aperçu de l'intégralité du code de numérisation processus de connexion.

3. Traitement de chaque étape de numérisation du code QR pour se connecter

1) Liaison de l'identité de l'utilisateur

Afin de réaliser la numérisation du code QR connexion, nous Il est nécessaire de lier le WeChat de l'utilisateur au système existant, de sorte que lorsque l'utilisateur scanne le code QR, l'identité de l'utilisateur puisse être déterminée et le processus de connexion automatique puisse être réalisé.

Nous pouvons effectuer des paramètres unifiés dans la gestion des utilisateurs, ou nous pouvons les définir après une connexion utilisateur régulière (nom d'utilisateur + mot de passe). Cela dépend principalement de la nécessité de conserver le nom d'utilisateur et le mot de passe pour nous connecter.

Par exemple, vous pouvez les lier uniformément dans la gestion des utilisateurs, c'est-à-dire que lors de la création d'un utilisateur, laissez l'utilisateur se lier à WeChat et obtenir l'identifiant unique de WeChat.

En plus de la méthode de connexion consistant à conserver le nom d'utilisateur et le mot de passe, les utilisateurs peuvent également lier WeChat par eux-mêmes après s'être connectés au système.

L'interface ci-dessus consiste à faire apparaître un calque dans une page, puis à demander que le code QR soit affiché, comme indiqué dans le code d'interface suivant.

        <p id="pWechat" class="easyui-dialog" style="width:450px;height:350px;padding:10px 20px"
             closed="true" resizable="true" modal="true" iconcls="icon-setting">
            <p>
                <h4>扫描用户二维码，进行绑定</h4>
            </p>
            <p align="center">
                <img id="imgQRcode" alt="使用微信扫码进行绑定" style="height:200px;width:auto" />
            </p>

            <p align="right">
                <a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-cancel" onclick="javascript: $(&#39;#pWechat&#39;).dialog(&#39;close&#39;)">关闭</a>
            </p>
        </p>

Lorsque la couche ci-dessus est ouverte, nous utilisons JS pour obtenir dynamiquement le code QR à afficher. Le code JS spécifique est le suivant.

    //绑定微信登陆
    function BindWechat() {        var url = "http://www.iqidi.com/H5/BindWechat?id=@Session["UserID"]";
        url = encodeURIComponent(url);        $("#imgQRcode").attr("src", "/H5/QR?url=" + url);        //打开绑定窗口
        $("#pWechat").dialog('open').dialog('setTitle', '使用微信扫码进行绑定');
    }

上面的JS只是做前端的数据请求和显示，具体的QR动作Action其实就是生成扫描二维码的过程，这个二维码其实就是采用通用的方式，来构建一个指向我们绑定账号的地址，从而实现我们绑定账号的判断，二维码的生成过程如下所示。

        /// <summary>
        /// 转换二维码连接为图片格式        /// </summary>
        /// <param name="url">二维码连接</param>
        /// <returns></returns>        [HttpGet]        public ActionResult QR(string url)
        {            //初始化二维码生成工具
            QRCodeEncoder qrCodeEncoder = new QRCodeEncoder();
            qrCodeEncoder.QRCodeEncodeMode = QRCodeEncoder.ENCODE_MODE.BYTE;
            qrCodeEncoder.QRCodeErrorCorrect = QRCodeEncoder.ERROR_CORRECTION.M;
            qrCodeEncoder.QRCodeVersion = 0;
            qrCodeEncoder.QRCodeScale = 4;            //将字符串生成二维码图片
            var image = qrCodeEncoder.Encode(url, Encoding.Default);            //保存为PNG到内存流  
            MemoryStream ms = new MemoryStream();
            image.Save(ms, ImageFormat.Png);
            image.Dispose();            return File(ms.ToArray(), "image/Png");
        }

为了实现用户的绑定，我们需要获取当前用户的身份信息，因此需要在BindWeChat的操作里面做一个转向处理，如下接口所示。

        /// <summary>
        /// 生成绑定微信的地址        /// </summary>
        /// <returns></returns>
        public ActionResult BindWechat()

这个函数处理里面，我们需要重新定向处理，我们把它定向到BindAccount函数里面，方便获取用户的openid和其他必要的信息。

另外我们基于微信开放平台的应用，建立了一个和微信账号信息的联系，因此创建数据库信息如下所示。

也就是一个具体的开放平台应用对应着一个具体的微信账号，这样我们就可以充分利用配置进行处理了。

上面提到的BindAccount的处理的逻辑就是获取必要的信息，然后在数据库层面对身份信息进行验证，具体代码如下所示。

        /// <summary>
        /// 绑定用户微信号        /// </summary>
        /// <param name="id">账号ID</param>
        /// <returns></returns>
        public ActionResult BindAccount()
        {
            WebAppInfo appInfo = GetWebApp(ConfigData.WebAppId);
            AccountInfo accountInfo = GetAccount(appInfo.AccountNo);            var htResult = GetOpenIdAndUnionId(accountInfo.UniteAppId, accountInfo.UniteAppSecret);//存储openid方便使用
            string openid = htResult["openid"].ToString();            var unionid = htResult["unionid"].ToString();            var userid = Request.QueryString["id"];            var state = Request.QueryString["state"];

            if (!string.IsNullOrEmpty(openid) && !string.IsNullOrEmpty(userid))
            {
                CommonResult result = BLLFactory<User>.Instance.BindUser(openid, unionid, userid.ToInt32());                if (result.Success)
                {                    return BindSuccess();
                }                else
                {                    return BindFail();
                }
            }            else
            {                throw new WeixinException("无法获取openid" + string.Format(", openid:{0}, userid:{1}", openid, userid));
            }
        }

在绑定的过程，我们需要考虑绑定正确账号，重复绑定其他账号，无效绑定几种情况，如果成功绑定正确账号（可多次处理结果一样），那么得到界面如下所示（这个界面的样式采用了weui的样式）。

  

2）用户的扫码登录处理

上面绑定了账号后，就可以通过扫码进行登录了，扫码回调的时候我们有自己的判断处理，扫码界面如下所示（我们在保留用户名密码登陆的方式外，增加了一个扫码登录的处理）。

如果是Bootstrap的界面效果

如果是EasyUI的界面效果

这个和前面的二维码显示规则差不多，不过他们的连接地址是不同的，这个地方用到了开放平台的接口，也就是我们前面提到开放平台认证的接口了。

上面的扫码登录的界面代码如下所示。

    <!--二维码扫描登陆的界面层-->
    <p id="pWechat" class="easyui-dialog" style="width:550px;height:500px;padding:10px 20px"
         closed="true" resizable="true" modal="true" iconcls="icon-setting">
        <p id="login_container" align="center">
        </p>

        <p align="right">
            <a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-cancel" onclick="javascript: $(&#39;#pWechat&#39;).dialog(&#39;close&#39;)">关闭</a>
        </p>
    </p>

上面代码需要引入JS文件，并使用微信JSSDK的API进行显示的。

    <!--使用微信扫码进行登陆-->
    <script src="http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"></script>
    <script language="javascript">

        function OpenJSLogin() {            var obj = new WxLogin({
                id: "login_container",
                appid: "@ViewBag.appid",
                scope: "snsapi_login",
                redirect_uri: "@ViewBag.redirect_uri",
                state: "@ViewBag.state",
                style: "black",
                href: ".impowerBox .qrcode {width: 200px;}"
            });            //打开绑定窗口            $("#pWechat").dialog(&#39;open&#39;).dialog(&#39;setTitle&#39;, &#39;使用微信扫码进行登陆&#39;);
        }    </script>

这个里面的参数，如APPID就是来源我们认证后的开放平台参数。

这些信息我们在MVC控制器后面获取后绑定在ViewBag，方便界面前端的使用。

            //使用JSLogin登陆
            WebAppInfo appInfo = BLLFactory<WebApp>.Instance.FindByID(ConfigData.WebAppId);
            ArgumentValidation.CheckForNullReference(appInfo, "Web应用程序appInfo");            if (appInfo != null)
            {
                ViewBag.appid = appInfo.OpenAppID;
                ViewBag.redirect_uri = appInfo.LoginCallBackUrl;
                ViewBag.state = ConfigData.AuthState;
            }

其中的redirect_uri是通过数据库获取的LoginCallBackUrl地址，这个地址类似如下格式：www.iqidi.com/H5/callback?uid=iqidiSoftware

也就是我们在开放平台处理返回后进行的回调处理。

通过开放平台的APPID和APPSecret，我们可以获取到对应的接口调用凭证，然后根据接口凭证，以及openid，获得用户的公众平台统一的UnionID，这个标识是我们用户的唯一标识，代码如下所示。

                var result = baseApi.GetAuthToken(appid, appsecret, code);                if (result != null && !string.IsNullOrEmpty(result.openid))
                {
                    openid = result.openid;                    var unionResult = baseApi.GetSnsapiUserInfo(result.access_token, result.openid);

                    ht.Add("openid", openid);
                    ht.Add("unionid", unionResult != null ? unionResult.unionid : "");
                }

有了unionid我们就可以根据这个标识在我们的用户数据库里面查找对应的用户，如下代码所示。

            //开放平台的OpenID，不是公众号的OpenID,需要转换为unionid
            if (!string.IsNullOrEmpty(openid) && !string.IsNullOrEmpty(unionid))
            {
                UserInfo userInfo = BLLFactory<User>.Instance.FindByUnionId(unionid);

然后判断我们去到的用户信息是否正确，如下代码所示

                if (userInfo != null)
                {
                    CommonResult loginResult = CheckLogin(userInfo.Name);                    if (!loginResult.Success)
                    {
                        LogHelper.Info(string.Format("用户登陆不成功，{0}", loginResult.ErrorMessage));
                    }                    //登陆成功后的重定向地址
                    var url = appInfo.HomeUrl;  //例如：http://www.iqidi.com/Home
                    return Redirect(url);
                }

如果不成功，那么我们定向到指定的界面即可。

            //如不成功，最后都统一提示信息
            ViewBag.Error = "获取信息失败，登陆错误";            return View("LoginError");

如果我们登陆成功后，需要设置一些Session信息或者Cookie信息，那么就可以通过CheckLogin函数进行处理即可。

以上就是我们结合微信开放平台实现微信扫码登录的过程，其中整个过程就是用到了下面几个过程。

1）使用JSSDK的脚本实现扫码获取code

JS微信登录主要用途：网站希望用户在网站内就能完成登录，无需跳转到微信域下登录后再返回，提升微信登录的流畅性与成功率。 网站内嵌二维码微信登录JS实现办法：

步骤1：在页面中先引入如下JS文件（支持https）：

<script src="http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"></script>

步骤2：在需要使用微信登录的地方实例以下JS对象：

                          var obj = new WxLogin({
                              id:"login_container", 
                              appid: "", 
                              scope: "", 
                              redirect_uri: "",
                              state: "",
                              style: "",
                              href: ""
                            });

2) 第二步：通过code获取access_token

通过code获取access_token

api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code

3)第三步：通过access_token调用接口

获取access_token后，进行接口调用，

对于接口作用域（scope），能调用的接口有以下：

授权作用域（scope）	接口	接口说明
snsapi_base	/sns/oauth2/access_token	通过code换取access_token、refresh_token和已授权scope
	/sns/oauth2/refresh_token	刷新或续期access_token使用
	/sns/auth	检查access_token有效性
snsapi_userinfo	/sns/userinfo	获取用户个人信息

Parmi eux, snsapi_base appartient à l'interface de base. Si l'application dispose déjà d'autres autorisations de portée, elle aura les autorisations de snsapi_base par défaut. L'utilisation de snsapi_base peut permettre à l'autorisation de la page Web mobile de contourner l'action consistant à accéder à la page de connexion d'autorisation pour demander l'autorisation de l'utilisateur, et d'accéder directement à la page Web tierce avec le ticket temporaire d'autorisation (code), mais cela rendra l'autorisation de l'utilisateur autorisée. scope (scope) uniquement snsapi_base , ce qui entraîne l'impossibilité d'obtenir des données et des fonctions de base nécessitant l'autorisation de l'utilisateur.

4) Obtenir des informations et effectuer un traitement de pré-connexion dans l'interface de rappel

Grâce à l'interface ci-dessus, nous pouvons obtenir les informations d'identité de l'utilisateur correspondantes, afin qu'elles puissent être combiné avec notre base de données d'utilisateurs Identification et traitement de l'identité de l'utilisateur, définition des informations de session ou de cookies nécessaires, etc., et enfin localisation sur l'interface principale de notre application.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!