フロントエンドドッキング WeChat公式アカウントWebページ開発プロセス、認証ドッキング

前述のように、WeChat 公式アカウント Web ページのフロントエンドドッキングの開発プロセス、初期構成について説明しましたが、この記事では主に公式アカウントの認証ドッキングについて詳しく紹介します。

1.WeChat js-sdkの導入

JSインターフェースを呼び出す必要があるページに次のJSファイルを導入します。

http://res.wx.qq.com/open/js/jweixin-1.6.0.js

上記のリソースにアクセスできないときにサービスの安定性をさらに向上させる必要がある場合は、アクセスを次のように変更できます。

http://res2.wx.qq.com/open/js/jweixin-1.6.0.js

2. ブート認証

WeChat の許可されたアドレスを呼び出す前に、appid、redirect_uri、response_type、scope、#wechat_redirect などのいくつかの必要なパラメータが必要です。以下のリンクが許可されたアドレスであり、以下のパラメータの取得と機能を以下に紹介します。WeChat Web ページの認証文書

https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect

ここに画像の説明を挿入
1. appid
appid は通常、コード内にプレーンテキストの appid が表示されないようにするため、インターフェイスを通じて取得されます。

2. redirect_uri
redirect_uri は、承認後にリダイレクトされるコールバックリンクのアドレスです。これは、WeChat 開発者ツールのアドレスバーのアドレスです。

3.scope
スコープはアプリケーション認可スコープであり、 2 つのパラメータsnsapi_baseとsnsapi_userinfoがあります。
snsapi_base はサイレント認証用であり、ユーザーの openid のみを取得できます。
非サイレント認証の場合、snsapi_userinfo はユーザーにアクティブな認証を要求する認証ページをポップアップ表示します。openid を通じてニックネームなどのユーザーの詳細情報を取得できます。性別、場所など。

3. 完全なコードの認証を開始します

ユーザーが認可されているかどうかを判断するにはどうすればよいでしょうか? リダイレクトされたアドレスにコードが含まれているかどうかを判断しますユーザー情報が取得されているかどうかも判断できます以下のコードが完全な認可プロセスです 1. redirect_uri を取得し
ます

var locationHref = document.location.href;

2. アドレスバーのパスパラメータを取得する

// 路径是否存参数
var array = []
var index = locationHref.indexOf("?")
// 如果本地路径存在参数则进行参数解析
if (index != -1) {
    
    
    var objStr = locationHref.substr(index + 1);
    var obj = objStr.split("&");
    for (var i = 0; i < obj.length; i++) {
    
    
        array[obj[i].split("=")[0]] = (obj[i].split("=")[1]);
    }
}

結果
ここに画像の説明を挿入
3. パスにパラメータコードが含まれているかどうかの判定パスに
パラメータコードが含まれているかどうかを判定し、権限のある代表者がいる場合はパス、そうでない場合は不正です

if (array.code == undefined) {
    
    
   	window.location = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${
      
      appid}&redirect_uri=${
      
      locationHref}&response_type=code&scope=snsapi_userinfo&state=#wechat_redirect`
}

ここに画像の説明を挿入