unapp一鍵登錄

一、整理思路

un-app官網提供多種實作[一鍵登錄](https://uniapp.dcloud.net.cn/uniCloud/univerify “”)的方法，這里的選擇是 自有服務器呼叫

二、uni-app準備賬號

1、un-app官網注冊賬號，并在dcloud開發者中心創建應用

2、開通一鍵登錄服務 保管好 ApiKey 和 ApiSecret

3、點擊右下角的添加應用并提交申請

4、添加服務空間

三、uni-app開通一鍵登錄

1、uni-app專案開通uniCloud服務

關聯云空間選擇阿里云或騰訊云均可

2、新建云函式

3、新建云函式后會有一個index.js生成，粘貼以下代碼

	'use strict';
	const crypto = require('crypto')
	exports.main = async (event, context) => {
		//event為客戶端上傳的引數
		console.log('event : ', event);
		console.log('引數', event.queryStringParameters);
		// event里包含著客戶端提交的引數
		const res = await uniCloud.getPhoneNumber({
			appid: '###', // 替換成自己開通一鍵登錄的應用的DCloud appid，使用callFunction方式呼叫時可以不傳（會自動取當前客戶端的appid），如果使用云函式URL化的方式訪問必須傳此引數
			provider: 'univerify',
			apiKey: '###, // 在開發者中心開通服務并獲取apiKey
			apiSecret: '###', // 在開發者中心開通服務并獲取apiSecret
			access_token: event.queryStringParameters.access_token,
			openid: event.queryStringParameters.openid
		})
		console.log('res',res); // res里包含手機號
		// 執行用戶資訊入庫等操作，正常情況下不要把完整手機號回傳給前端
		// 如果資料庫在uniCloud上，可以直接入庫
		// 如果資料庫不在uniCloud上，可以通過 uniCloud.httpclient API，將手機號通過http方式傳遞給其他服務器的介面，詳見：https://uniapp.dcloud.net.cn/uniCloud/cf-functions?id=httpclient
		return {
			code: 0,
			message: '獲取手機號成功',
			data:res
		}
	};

4、保存后上傳部署到云空間

5、勾選一鍵登錄（專案中的 manifest.json）

四、專案編碼

1、調取一鍵登錄

官方有示例代碼 查看

					uni.login({
							provider: 'univerify',
							success(res) { // 登錄成功
								console.log(res.authResult); // {openid:'登錄授權唯一標識',access_token:'介面回傳的 token'}
								res.authResult.accessToken = res.authResult.access_token
								return that.$request({
									method: 'POST',
									url: '后臺做具體邏輯的介面',
									data: res.authResult
								}).then(res => {
									uni.closeAuthView()//成功關閉授權頁面
									console.log('登錄成功', res)
									if (res.code) return
									that.$store.commit('setToken', res.data)
									that.$util.msg('登錄成功')
									setTimeout(() => {
										uni.redirectTo({
											url: '登陸成功跳轉的目標頁面'
										}) 
									}, 500)
								})
							},
							fail(res) { // 登錄失敗
								console.log(res.errCode)
								console.log(res.errMsg)
							}
						})

2、日志可以再云函式串列查看

云函式可在云函式串列查看

3、云函式url化

在云函式串列點擊詳情，下拉到底部點擊編輯設定一個url

4、后臺寫具體邏輯

5、需要的工具類

1、HeaUtil.java

	public class HeaUtil {
    /**
     * sha256_HMAC加密
     *
     * @param message 訊息
     * @param secret  秘鑰
     * @return 加密后字串
     */
    public static String sha256_HMAC(String message, String secret) {
        String hash = "";
        try {
            Mac sha256_HMAC = Mac.getInstance("HmacSHA256");
            SecretKeySpec secret_key = new SecretKeySpec(secret.getBytes(), "HmacSHA256");
            sha256_HMAC.init(secret_key);
            byte[] bytes = sha256_HMAC.doFinal(message.getBytes());
            hash = byteArrayToHexString(bytes);
        } catch (Exception e) {
            System.out.println("Error HmacSHA256 ===========" + e.getMessage());
        }
        return hash;

    }

    /**
     * 將加密后的位元組陣列轉換成字串
     *
     * @param b 位元組陣列
     * @return 字串
     */
    private static String byteArrayToHexString(byte[] b) {
        StringBuilder hs = new StringBuilder();
        String stmp;
        for (int n = 0; b != null && n < b.length; n++) {
            stmp = Integer.toHexString(b[n] & 0XFF);
            if (stmp.length() == 1)
                hs.append('0');
            hs.append(stmp);
        }
        return hs.toString().toLowerCase();
    }
}

標籤：Html/Css

上一篇：Dynamics CRM物體系列之欄位

下一篇：HTML5與CSS3新增特性筆記