WeChat Webページへの認証ログインを実現するajaxの方法の紹介

WeChat Web ページの認証ログインは、誰もが学習できるようにするための非常に一般的な機能です。この記事では主に、WeChat の Web ページで認証ログインを実現するための ajax の方法を紹介します。編集者がそれを参考にさせていただきます。編集者をフォローして一緒に見てみましょう

プロジェクトの背景

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

要件分析

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

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

以上がこの記事の全内容であり、皆様の学習に役立つことを願っております。また、皆様にもphp中国語ウェブサイトをサポートしていただければ幸いです。

関連する推奨事項:

WeChat Web ページの認証 Android へのログインに失敗しました! iOS で成功しました!

以上がWeChat Webページへの認証ログインを実現するajaxの方法の紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。