ajax を使用して WeChat Web ページに認証ログインを実装する手順 (コード付き)-jsチュートリアル-php.cn

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

php中世界最好的语言

リリース： 2018-03-30 15:14:12

オリジナル

4602 人が閲覧しました

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

プロジェクトの背景

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

要件分析

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

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

関数の実装

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

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

WeChat 承認 URL "<a href="//m.sbmmt.com/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="//m.sbmmt.com/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 つは状態です。必要なのは、コードを取得してバックエンドに渡すことです。バックエンドはコードを通じてユーザーの基本情報を取得できます。

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

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

ログイン後にコピー

この記事の事例を読んだ後は、さらに興味深いことに注目してください。