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>掃描用戶二維碼，進(jìn)行綁定</h4>
            </p>
            <p align="center">
                <img id="imgQRcode" alt="使用微信掃碼進(jìn)行綁定" 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;)">關(guān)閉</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', '使用微信掃碼進(jìn)行綁定');
    }

上面的JS只是做前端的數(shù)據(jù)請(qǐng)求和顯示，具體的QR動(dòng)作Action其實(shí)就是生成掃描二維碼的過程，這個(gè)二維碼其實(shí)就是采用通用的方式，來構(gòu)建一個(gè)指向我們綁定賬號(hào)的地址，從而實(shí)現(xiàn)我們綁定賬號(hào)的判斷，二維碼的生成過程如下所示。

        /// <summary>
        /// 轉(zhuǎn)換二維碼連接為圖片格式        /// </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到內(nèi)存流  
            MemoryStream ms = new MemoryStream();
            image.Save(ms, ImageFormat.Png);
            image.Dispose();            return File(ms.ToArray(), "image/Png");
        }

為了實(shí)現(xiàn)用戶的綁定，我們需要獲取當(dāng)前用戶的身份信息，因此需要在BindWeChat的操作里面做一個(gè)轉(zhuǎn)向處理，如下接口所示。

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

這個(gè)函數(shù)處理里面，我們需要重新定向處理，我們把它定向到BindAccount函數(shù)里面，方便獲取用戶的openid和其他必要的信息。

另外我們基于微信開放平臺(tái)的應(yīng)用，建立了一個(gè)和微信賬號(hào)信息的聯(lián)系，因此創(chuàng)建數(shù)據(jù)庫(kù)信息如下所示。

也就是一個(gè)具體的開放平臺(tái)應(yīng)用對(duì)應(yīng)著一個(gè)具體的微信賬號(hào)，這樣我們就可以充分利用配置進(jìn)行處理了。

上面提到的BindAccount的處理的邏輯就是獲取必要的信息，然后在數(shù)據(jù)庫(kù)層面對(duì)身份信息進(jìn)行驗(yàn)證，具體代碼如下所示。

        /// <summary>
        /// 綁定用戶微信號(hào)        /// </summary>
        /// <param name="id">賬號(hào)ID</param>
        /// <returns></returns>
        public ActionResult BindAccount()
        {
            WebAppInfo appInfo = GetWebApp(ConfigData.WebAppId);
            AccountInfo accountInfo = GetAccount(appInfo.AccountNo);            var htResult = GetOpenIdAndUnionId(accountInfo.UniteAppId, accountInfo.UniteAppSecret);//存儲(chǔ)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));
            }
        }

在綁定的過程，我們需要考慮綁定正確賬號(hào)，重復(fù)綁定其他賬號(hào)，無效綁定幾種情況，如果成功綁定正確賬號(hào)（可多次處理結(jié)果一樣），那么得到界面如下所示（這個(gè)界面的樣式采用了weui的樣式）。

2）用戶的掃碼登錄處理

上面綁定了賬號(hào)后，就可以通過掃碼進(jìn)行登錄了，掃碼回調(diào)的時(shí)候我們有自己的判斷處理，掃碼界面如下所示（我們?cè)诒Ａ粲脩裘艽a登陸的方式外，增加了一個(gè)掃碼登錄的處理）。

如果是Bootstrap的界面效果

如果是EasyUI的界面效果

這個(gè)和前面的二維碼顯示規(guī)則差不多，不過他們的連接地址是不同的，這個(gè)地方用到了開放平臺(tái)的接口，也就是我們前面提到開放平臺(tái)認(rèn)證的接口了。

上面的掃碼登錄的界面代碼如下所示。

    <!--二維碼掃描登陸的界面層-->
    <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;)">關(guān)閉</a>
        </p>
    </p>

上面代碼需要引入JS文件，并使用微信JSSDK的API進(jìn)行顯示的。

    <!--使用微信掃碼進(jìn)行登陸-->
    <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;使用微信掃碼進(jìn)行登陸&#39;);
        }    </script>

這個(gè)里面的參數(shù)，如APPID就是來源我們認(rèn)證后的開放平臺(tái)參數(shù)。

這些信息我們?cè)贛VC控制器后面獲取后綁定在ViewBag，方便界面前端的使用。

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

其中的redirect_uri是通過數(shù)據(jù)庫(kù)獲取的LoginCallBackUrl地址，這個(gè)地址類似如下格式：www.iqidi.com/H5/callback?uid=iqidiSoftware

也就是我們?cè)陂_放平臺(tái)處理返回后進(jìn)行的回調(diào)處理。

通過開放平臺(tái)的APPID和APPSecret，我們可以獲取到對(duì)應(yīng)的接口調(diào)用憑證，然后根據(jù)接口憑證，以及openid，獲得用戶的公眾平臺(tái)統(tǒng)一的UnionID，這個(gè)標(biāo)識(shí)是我們用戶的唯一標(biāo)識(shí)，代碼如下所示。

                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我們就可以根據(jù)這個(gè)標(biāo)識(shí)在我們的用戶數(shù)據(jù)庫(kù)里面查找對(duì)應(yīng)的用戶，如下代碼所示。

            //開放平臺(tái)的OpenID，不是公眾號(hào)的OpenID,需要轉(zhuǎn)換為unionid
            if (!string.IsNullOrEmpty(openid) && !string.IsNullOrEmpty(unionid))
            {
                UserInfo userInfo = BLLFactory<User>.Instance.FindByUnionId(unionid);

然后判斷我們?nèi)サ降挠脩粜畔⑹欠裾_，如下代碼所示

                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);
                }

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

            //如不成功，最后都統(tǒng)一提示信息
            ViewBag.Error = "獲取信息失敗，登陸錯(cuò)誤";            return View("LoginError");

如果我們登陸成功后，需要設(shè)置一些Session信息或者Cookie信息，那么就可以通過CheckLogin函數(shù)進(jìn)行處理即可。

以上就是我們結(jié)合微信開放平臺(tái)實(shí)現(xiàn)微信掃碼登錄的過程，其中整個(gè)過程就是用到了下面幾個(gè)過程。

1）使用JSSDK的腳本實(shí)現(xiàn)掃碼獲取code

JS微信登錄主要用途：網(wǎng)站希望用戶在網(wǎng)站內(nèi)就能完成登錄，無需跳轉(zhuǎn)到微信域下登錄后再返回，提升微信登錄的流暢性與成功率。 網(wǎng)站內(nèi)嵌二維碼微信登錄JS實(shí)現(xiàn)辦法：

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

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

步驟2：在需要使用微信登錄的地方實(shí)例以下JS對(duì)象：

                          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調(diào)用接口

獲取access_token后，進(jìn)行接口調(diào)用，

對(duì)于接口作用域（scope），能調(diào)用的接口有以下：

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

Grace à 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!