WeChat アプレットは、Web ビュー ページの認証を通じてユーザーの公式アカウント OpenID を取得します。

1. 準備

ステップ 1:
このアドレスから
WeChat 公式アカウントのテスト アカウントの AppID と appsecret を取得しますhttps://mp.weixin.qq.com/debug/cgi-bin/sandboxinfo?action=showinfo&t=sandbox/index (テスト公式アカウント)テスト可能、個人公式アカウントは不可、WeChat認証サービスアカウントは使用可能、WeChat認証サブスクリプションアカウントは使用不可）。
インターフェイス権限を表示するリンク:
https://developers.weixin.qq.com/doc/offiaccount/Getting_Started/Description_of_interface_privileges.html
テスト用パブリック アカウント インターフェイスの WeChat のプロンプトに従って、テスト用パブリック アカウントを生成します。非テストには注意が必要なだけでなく、Web ビューを使用する前に、開発者が WeChat パブリック プラットフォームに設定する必要があります。

同時に、Webページの認証インターフェースを変更する必要があります。

これはテストなので、ローカル IPv4 アドレスを変更し、バックエンドのポート番号を追加するだけです。127.0.0.1 は許可されないことに注意してください。

上記は私のものです。ドメイン名は正式環境では必須ですが、テスト環境では必要ありません。

ステップ 2:
WeChat ミニ プログラムのテスト アカウントも取得する必要があります。その中のAppIDとappsecrtを取得します。注: ミニ プログラムの AppID と WeChat 公式アカウントは同じではありません。

ステップ 3:
バックエンドに WeiXin-JAVA 開発キットを使用します。
具体的には、リンクからhttps://github.com/Wechat-Group/WxJavaにアクセスする
か、自分の能力に応じて自分で実装することができます。

2. 適用シナリオの説明

他のアプリケーションシナリオについてはわかりませんが、私の実際の状況によると（現在の方法はunionIDを使用せずに使用できます）

3. 導入手順

ステップ 1: WeChat 開発ツールをダウンロードする (それ以外の場合はテストする方法)

ステップ 2: WeChat ミニ プログラムの AppId を使用して WeChat ミニ プログラム プロジェクトを作成し、公式の簡単なエントリ デモを使用するかどうかを選択します。非常にシンプルなプログラムで一発で書けるので公式のものは必要ありません。

ステップ 3: ボタンを作成し、ボタンをクリックして WeChat パブリック アカウント OpenID を取得します。

// index.wxml
<button bindtap="getGzhOpenId">获取公众号OpenId</button>

ワンボタンワンクリックイベント。

クリックイベントのコードは次のとおりです。

// index.js
getGzhOpenId(){
    
    
    wx.navigateTo({
    
    
      url: '/pages/test/test',
    })
  }

小さなプログラムを書いたことがある人なら誰でも、これがページジャンプであることを知っています。ただし、このジャンプは通常のページではなく、Web ビューとのインターフェイスです。

// test.wxml
<web-view src="{
     
     {src}}">
</web-view>

ページ全体のコードは 2 行のみで、乗換駅に相当し、ユーザーが見る必要はありません。src は関連する公式アカウントを開くことができる記事ですが、その他の Web ページの場合は、アプレット管理バックグラウンドにログインしてビジネス ドメイン名を設定する必要があります。

// test.js
onLoad(){
    
    
	let redirect_url = 'http://测试公众号网页授权的地址/后台接口地址/appid';   
   this.data.src = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=测试号AppID&redirect_uri=' + escape(redirect_url) + '&response_type=code&scope=snsapi_base&state=STATE#wechat_redirect';
   this.setData({
    
    
    src: this.data.src
   })
}

以上がポイントです。再構成:
アプレットをindex.wxmlにロードします -> ボタンをクリックしてtest.wxmlにジャンプします -> test.wxmlに来て、jsのレンダリング・メソッド（onLoad()）を実行します。{} レンダリング中に、取得を開始できます。公開番号OpenIDが立ち上がりました。

redirect_url: コールバックアドレス

this.data.src: つまり、Web ビューで src にアドレスを割り当てると、Web ビューはこのアドレスを開きます。開いた後、コードを取得し、redirect_url アドレスにコールバックして、WeChat 公式アカウント コードを伝えます (コードはアプレット wx.login() のコードではありません)。

アドレス内のパラメーターは、公式ドキュメントを参照できます:
https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_webpage_authorization.html

スコープパラメータには特別な注意を払う必要があります。彼には 2 つの値があり、1 つは SNSapi_base です。もう 1 つは snsapi_userinfo です。前者は openId を取得することです。後者はOpenIdとユーザー情報を取得するもので、公式アカウントをフォローしていなくても取得できます。WeiXin-Java-Demo のインターフェイスは userInfo を取得するため、スコープを変更する必要があります。変更しないとエラーが報告されます。OpenId を取得するだけであれば。次の例を参照してください。

@RequestMapping({
    
    "/getOpenId"})
    public String getOpenId(@PathVariable String appid, @RequestParam String code, ModelMap map) {
    
    
        if (!this.wxService.switchover(appid)) {
    
    
            throw new IllegalArgumentException(String.format("未找到对应appid=[%s]的配置，请核实！", appid));
        } else {
    
    
            try {
    
    
                WxOAuth2AccessToken accessToken = this.wxService.getOAuth2Service().getAccessToken(code);
                map.addAttribute("openId",accessToken.getOpenId());
            } catch (WxErrorException var6) {
    
    
                var6.printStackTrace();
            }
            return "xxx";   
        }
    }

実際、weixin ツールキットはそのメソッドをカプセル化していますが、デモでは使用されておらず、インターフェイスをコピーし、貼り付けて変更するだけです。

この時点で、デバッグ可能な OpenId を取得しましたが、アプレットがまだ白い画面に表示されているのは不思議です。ははは、私が理解しなければならない Web ビュー インターフェイスは、HTML に埋め込まれた ifrname ページだからです。

次のステップも重要なポイントですが、
上の背景インターフェイスの図を見ると、戻り値は xxx です。xxx は、xxx.html インターフェイスであるページを表します。springmvc を通じてビューをアプレットに返す必要があります。アプレットの Web ビューは、バックグラウンドで作成したインターフェイスを開きます。
では、xxx.htmlには何が書かれているのでしょうか？読む

アプレットで xxx.html を開いた後、何かを表示したいのですか? いや、いや、いや、必要ないけど、必要なだけなら何も言わないよ。

// xxx.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
    <TITLE> New Document </TITLE>
    <META NAME="Generator" CONTENT="EditPlus">
    <META NAME="Author" CONTENT="">
    <META NAME="Keywords" CONTENT="">
    <META NAME="Description" CONTENT="">
    <script src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
</HEAD>
<BODY>
</BODY>
<SCRIPT LANGUAGE="JavaScript">
    function back()
    {
      
      
        wx.miniProgram.redirectTo({
      
      url: "/pages/index/index?mpOpenid=${openId}"})
        //wx.miniProgram.postMessage({data:"${openId}"})
    }

    back();
</SCRIPT>
</HTML>

xxx.html をアプレットに返した後、ビューがロードされ、ビューは back() メソッドを実行します。アプレットで redirectTo を使用して、目的のインターフェイスに戻ります。このインターフェースはアプレット内に存在する必要があります。それから必ずjweixinを紹介してください。そうしないと、アプレットのメソッドを Web ページで使用できなくなります。戻るには、URL に WeChat 公式アカウントの openId を指定して、アプレットのインデックス インターフェイスに戻ります。

onLoad(e){
    
    
console.log(e);
}

OpenIDを取得することができ、上記の方法で取得した後、wx.loginで取得したアプレットのOpenIDに対応させることができます。

上記の方法は、さまざまな状況に拡張することもできます。たとえば、アプレットが初めてロードされるときは、最初に 10 秒間の注意通知を読みます。Webビューページを開くときに小さなプログラムOpenIdを実行し、バックエンドで公式アカウントOpenIDを一度に取得して永続的に保存することもできます。戻る必要はありません。

エピローグ

CSDN を書くのは初めてで、マークダウンを使用して書くのも初めてですが、書く量も減り、美化のビジョンもありません。重要なのは、仕事上の問題を解決することです。次回面接官がプロジェクトで遭遇した問題について尋ねたときのために、これを記録として使用してください (それはまだ私が遭遇した問題と呼ばれていますか?)。同時に、この記事は、誰もが困難に遭遇したときにそれを使用できることを願っています。初めてだったので自分で百度を調べてゆっくり理解しました。他の同様の記事もお読みください。彼らの記事からインスピレーションを得たので、以下に添付します。同時に読んでいただくとより早く理解できると思います。

https://blog.csdn.net/qq_41929578/article/details/121748935
https://blog.csdn.net/daengwei/article/details/124535274
https://blog.csdn.net/qq_21492635/article/details/ 119491131