ajax を使用して WeChat Web ページに認証ログインを実装する手順 (コード付き)

今回は、Ajax を使用して WeChat Web ページ認証 ログインを実装する手順 (コード付き) を紹介します。見てください。

プロジェクトの背景

このプロジェクトはフロントエンドとバックエンドが完全に分離されたソリューションを採用しているため、従来のWeChat認可ログイン方法は使用できず、WeChat認可ログインの実装にはajaxを使用する必要があります。

要件分析

私はphperなので、WeChat開発はEasyWeChatを使用しているため、実装方法はEWベースです。

実際、これを実装するのは面倒です。実装する前に、WeChat 認証のプロセス全体を理解する必要があります。

ユーザーを認証ページに誘導して認証に同意し、コードを取得します
Webページの認証access_token（基本サポートのaccess_tokenとは異なります）のコードを交換します
必要に応じて、開発者Web ページの認証 access_token を更新して有効期限を回避できます
Web ページの認証 access_token と openid を通じてユーザーの基本情報を取得します (UnionID メカニズムをサポート)
実際、率直に言って、フロントエンドが行う必要があることは 1 つだけです、ユーザーが WeChat 認証ページを開始し、コードを取得してから現在のページに移動し、ユーザーおよびその他の関連情報と引き換えにバックエンドを要求するようにガイドします。

関数の実装

ユーザーに WeChat 認証確認ページを呼び出すようにガイドします

ここでは 2 つのことを行う必要があります。1 つ目は jsapi ドメイン名を構成し、2 つ目は WeChat Web ページ認証用のコールバック ドメイン名を構成します

WeChat 承認 URL "<a href="http://www.php.cn/wiki/373.html" target="_blank">https://</a>

open.weixin.qq.com/connect/oauth2 /authorize?appid= " + appId + "&redirect_uri=" + location.href.split('#')[0] + "&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect 接続から、次のことがわかります。 2 つの

変数 "<a href="http://www.php.cn/wiki/373.html" target="_blank">https://</a>open.weixin.qq.com/connect/oauth2/authorize?appid=" + appId + "&redirect_uri=" + location.href.split('#')[0] + "&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect 、appId、および redirect_uri は、承認する WeChat 公式アカウントの appId です。もう 1 つのコールバック URL は、実際にはユーザーの後にコールバックされる URL です。 WeChat でのログインは 2 つのパラメーターで許可されています。1 つはコード、もう 1 つは状態です。必要なのは、コードを取得してバックエンドに渡すことです。バックエンドはコードを通じてユーザーの基本情報を取得できます。

。バックエンドはコードを取得した後、ユーザーの基本情報を取得し、その他の関連情報をフロントエンドに返します。その後、ローカル ストレージなどの処理を実行します。

1. function getUrlParam(name) {
     var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
     var r = window.location.search.substr(1).match(reg);
     if (r != null) return unescape(r[2]);
     return null;
   }
   function wxLogin(callback) {
     var appId = 'xxxxxxxxxxxxxxxxxxx';
     var oauth_url = 'xxxxxxxxxxxxxxxxxxx/oauth';
     var url = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" + appId + "&redirect_uri=" + location.href.split('#')[0] + "&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect"
     var code = getUrlParam("code");
     if (!code) {
       window.location = url;
     } else {
       $.ajax({
         type: 'GET',
         url: oauth_url,
         dataType: 'json',
         data: {
           code: code
         },
         success: function (data) {
           if (data.code === 200) {
             callback(data.data)
           }
         },
         error: function (error) {
           throw new Error(error)
         }
       })
     }

   この記事の事例を読んだ後は、さらに興味深いことに注目してください。
2. ID カードと銀行カード番号の形式を決定するための通常のルールの書き方

JSを使用してゼロ以外の正の整数を検証する方法

以上がajax を使用して WeChat Web ページに認証ログインを実装する手順 (コード付き)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。