uniapp アプレットの電話番号認証 ワンクリック ログイン アプレット インターフェイスの呼び出し getPhoneNumber java+uniapp

ユニアプリフロントエンド

uniapp ログイン ボタン: (これら 2 つのパラメータをボタンに追加します)

open-type="getPhoneNumber" @getphonenumber="getPhoneNumber"

<button class="cu-btn bg-green margin-tb-sm lg" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">微信授权登录</button>

メソッドメソッド領域

getPhoneNumbe(e)このeはログイン ユーザー アプレットのコード値です

コード値はその後、ミニ プログラムの公式インターフェイスにリクエストしてユーザーの携帯電話番号を取得するために使用されます。

methods: {

getPhoneNumber(e){
			console.log(e)

			
		uni.showLoading({
					title: "加载中"
				});
			
			var data = {code:e.detail.code}
			console.log("请求参数",data)
			Net.request({ //请求自己的后台
				url: API.userApi(), //后台地址 
				data:JSON.stringify(data), //code值参数
				header:{'Content-Type':'application/json;charset=UTF-8'}, 
				method: "post",
				success: function(res) {
					// setTimeout(function () {
					// 	uni.hideLoading();
						
					// }, 1000);
					if (res.data.code == 200) {
						localStorage.setItem("accessToken",res.data.token);
						localStorage.setItem("userInfo",res.data.userInfo.phonenumber);
						localStorage.setItem("nickName",res.data.userInfo.nickName);
						localStorage.setItem("jf",res.data.userInfo.jf);
						localStorage.setItem("je",res.data.userInfo.je);
						uni.showToast({
							title: '登录成功', //显示的文字
							icon: 'success' ,//显示的图标
							success:function(){
								setTimeout(function () {
									uni.switchTab({
										url:'/pages/home/home'
									});
								}, 1000);
								
							}
						});
						
					}else {
						
					}
					
				
					console.log(res);
				}
			})
			
		}
}

バックエンド呼び出しロジック 一般的なロジックは次のステップに分かれています 

                2023-03-08: 今後もパラメータを調整するためにWeChatが提供する最新のインターフェース文書に注意を払う必要があります

(固定値: key:grant_type value: client_credential 詳細については、次のコードの getWxAccessToken を参照してください) 

(個人 appId +個人秘密 キーは WeChat パブリック プラットフォームで取得されます) WeChat パブリック プラットフォームWeChat パブリック プラットフォームは、個人、企業、組織にビジネス サービスとユーザー管理機能を提供する新しいサービス プラットフォームです。https://mp.weixin.qq.com/

手順: 

1. パラメータを準備します:  フロントデスクから要求されたコード+個人の appId +個人の秘密鍵 +固定値

2.  https://api.weixin.qq.com/cgi-bin/token インターフェイス アドレスをリクエストして、アプレットによって提供される access_token を取得します。

3.アプレットから返された access_token を使用して URL を結合し、この URL をリクエストして現在アプレットにアクセスしているユーザーの携帯電話番号を取得します。

4. https://api.weixin.qq.com/wxa/business/getuserphonenumber?access_token=2 ステップの戻り値をリクエストします

5. 携帯電話番号を取得した後、個人のバックグラウンドログインロジック処理を実行します

       

個人のバックグラウンド ログイン ロジックの例 (参考) :

1. システムまたはアプレット ユーザーのログイン アカウントは、一意の識別子として携帯電話番号に基づいています。つまり、携帯電話番号がアカウント番号です。

2. 3番目のステップで他のログイン端末と競合しないように、アプレットに独立したログインメソッドを記述します。

3.独立方式では、 携帯電話番号を取得後、ユーザーテーブルにユーザーが存在するかどうかを確認し、存在しない場合はユーザーを自動登録し、初期パスワードを123456に設定してトークンを返却します。

4. ユーザーがすでに存在する場合、初期パスワードを割り当てた後、自動的にログインし、トークンを返します。

                

バックグラウンド インターフェイスはコード ツール クラスを呼び出します。

import com.alibaba.fastjson2.JSONObject;
import java.util.HashMap;
import java.util.Map;


public class WxAuthUtils {
    //获取手机号
    private static final String getPhoneNumberInterface = "https://api.weixin.qq.com/wxa/business/getuserphonenumber?access_token=";

    // 个人appid
    public static final String WX_LOGIN_APPID = "wxcd115789468a32aa4";
    // 个人secret 密匙
    public static final String WX_LOGIN_SECRET = "5117d6a34d8c789997177d8b4e82";

    public static UserPhoneInfo getPhoneNumberByAccessToken(String userCode) {
        Map<String,String> params = new HashMap<>();
        params.put("code",userCode);
        String url =getPhoneNumberInterface + getWxAccessToken();
        JSONObject jsonObject = WxAuthHttpSend.httpPost(url, params);
        if (jsonObject!=null && jsonObject.get("phone_info")!=null) {
            JSONObject result = jsonObject.getJSONObject("phone_info");
            UserPhoneInfo phoneInfo =  new UserPhoneInfo();
            phoneInfo.setPhoneNumber(result.getString("phoneNumber"));
            phoneInfo.setCountryCode(result.getString("countryCode"));
            phoneInfo.setPurePhoneNumber(result.getString("purePhoneNumber"));
            return phoneInfo;
        }
        return null;
    }

    public static String getWxAccessToken() {
        Map<String,String> params = new HashMap<>();
        params.put("grant_type","client_credential");
        params.put("appid",WX_LOGIN_APPID);
        params.put("secret",WX_LOGIN_SECRET);
        JSONObject jsonObject = JSONObject.parseObject(WxAuthHttpSend.doGet("https://api.weixin.qq.com/cgi-bin/token", params));
        return jsonObject.getString("access_token");
    }

コントローラー/サービス層呼び出しの例 

 UserPhoneInfo getLoginByUser = WxAuthUtils.getPhoneNumberByAccessToken(wxLoginBody.getCode());

 エンティティ/ドメイン エンティティ クラス (小さなプログラムの戻り値のカプセル化)

package com.system.common.utils.wx;

public class UserPhoneInfo {
    private String phoneNumber; 
    private String purePhoneNumber;
    private String countryCode;

    public String getPhoneNumber() {
        return phoneNumber;
    }

    public void setPhoneNumber(String phoneNumber) {
        this.phoneNumber = phoneNumber;
    }

    public String getPurePhoneNumber() {
        return purePhoneNumber;
    }

    public void setPurePhoneNumber(String purePhoneNumber) {
        this.purePhoneNumber = purePhoneNumber;
    }

    public String getCountryCode() {
        return countryCode;
    }

    public void setCountryCode(String countryCode) {
        this.countryCode = countryCode;
    }
}