WeChat Web ページに認証ログインを実装する Ajax メソッド (グラフィック チュートリアル)

この記事では主に、WeChat Web ページに認証ログインを実装するための ajax メソッドを紹介し、参考として提供します。

プロジェクトの背景

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

要件分析

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

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

1. ユーザーを認証ページに誘導して認証に同意し、コードを取得します

2. Webページの認証access_token（基本サポートのaccess_tokenとは異なります）のコードを交換します

3. 必要に応じて、開発者Web ページの認証 access_token を更新して有効期限を回避できます

4. Web ページの認証 access_token と openid を通じてユーザーの基本情報を取得します (UnionID メカニズムをサポート)

実際、率直に言って、フロントエンドが行う必要があることは 1 つだけです、ユーザーが WeChat 認証ページを開始し、コードを取得してから現在のページに移動し、ユーザーおよびその他の関連情報と引き換えにバックエンドを要求するようにガイドします。

関数の実装

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

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

WeChatを構築する接続から、appId と redirect_uri という 2 つの変数があることがわかります。言うまでもなく、appId は、これから認証しようとしている WeChat 公式アカウントの appId です。もう 1 つのコールバック URL は、実際には現在のページの 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

1. ユーザーが WeChat にログインして承認した後にコールバックされる URL には 2 つのパラメーターが含まれます。1 つ目はコード、もう 1 つは状態です。コードを取得してバックエンドに渡すだけで、バックエンドはコードを通じてユーザーの基本情報を取得できます。

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

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

以上は皆さんのためにまとめたもので、今後皆さんのお役に立てれば幸いです。

関連記事:

JS実装 ajax呼び出しバックグラウンド定義(コード付き)

ajax+php制御関数呼び出し手順詳細解説

AjaxでLoading効果を実現

以上がWeChat Web ページに認証ログインを実装する Ajax メソッド (グラフィック チュートリアル)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。