WeChat Webページの承認を行うVueプロジェクト

トピックに直接移動

ドキュメントアドレス：https : //developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_webpage_authorization.html

Webページの承認はまだ完了していませんが、問題が発生しているため、問題と解決策を記録しています

現在私が知っているのは、コードを入手する必要があることです。

WeChat Web認証の最初のステップでは、ユーザーがWeb認証に同意する必要があります

widow.location.href = https：// open.weixin.qq.com/connect/oauth2/authorize?appid= APPID＆redirect_uri = REDIRECT_URI＆response_type = code＆scope = SCOPE＆state = STATE＃wechat_re

サービス番号が拡張インターフェースを取得すると、デフォルトで、スコープパラメーターにsnsapi_baseおよびsnsapi_userinfoが含まれます。

snsapi_base：ユーザー情報のサイレント取得（ユーザーの同意は不要）はopenidのみを取得できます

snsapi_userinfo：ユーザーの同意が必要です（新しいページがポップアップ表示され、ユーザーが同意をクリックします）。openidに加えて、ユーザー名とアバターも取得できます

私はここでサイレント取得を使用します（WeChat環境にある場合）。

var url = encodeURIComponent（window.location.href）;
var getCodeUrl = `https：// open.weixin.qq.com/connect/oauth2/authorize?appid = $ {'appid'}＆redirect_uri = $ {url}＆response_type = code＆scope = snsapi_base＆state = 1＃wechat_redirect`; 
window.location.href = getCodeUrl;

上記の操作を実行した後、WeChatは新しいページにジャンプし、このページのアドレスにコードパラメータがあります

http：// www.xxx.cn/param1/？code = xxxaxxxyPDFw1DAzxxx0EsxxxiSZ＆state = 1 ＃/ query1 / 1

このアドレスのコード値は、必要なコードです

しかし、私の元のページのアドレスは次のとおりです。

http：// www.xxx.cn/param1/#/query1/1

WeChatは＃記号の後のパラメーターを混乱させます（位置が間違っています。これはVueプロジェクトでは深刻です。vueプロジェクトは＃記号の後のパラメーターをルートとして受け取り、WeChatによって返されるルートが乱雑になるため、間違いなく問題が発生します）

WeChatに返してほしいのは、次のURIアドレスです。

http：// www.xxx.cn/param1/#/query1/1?code=xxxaxxxyPDFw1DAzxxx0EsxxxiSZ&state=1

。

WeChat Webページの承認を行うVueプロジェクト

おすすめ