Authing新功能——小程式掃碼登入

ivy同志發表於2018-07-19

近期，Authing 釋出了新功能——小程式掃碼登入。

小程式掃碼登入指使用Authing小程式身份管家在網頁端或其它客戶端執行微信登入，目前的SDK僅支援客戶端JavaScript。其它語言若想使用可參考HTTP介面說明。

點選此處立即體驗小程式掃碼登入

注意：使用小程式掃碼登入，請將authing-js-sdk升級到v0.1.19版本以上

掃碼demo

接入流程

1. 配置小程式資訊

在Authing控制檯中填入小程式的appId、secret和回撥地址，使用者掃碼登入成功會回撥至填入的地址。

配置小程式資訊

2. 使用SDK（authing-js-sdk）

在authing-js-sdk中使用startWXAppScaning方法（authing-js-sdk文件）：


var Authing = require('authing-js-sdk');

// 對Client ID和Client Secret進行驗證，獲取Access Token
var auth = new Authing({
	clientId: 'your_client_id',
	secret: 'your_app_secret'
});

auth.then(function(validAuth) {

	validAuth.startWXAppScaning({
    	mount: 'qrcode-node', //二維碼掛載點的HTML元素ID，如不寫則預設漂浮在文件中間
	});
	
})

複製程式碼

掃碼完成後會自動跳到使用者配置的URL上。

引數說明


validAuth.startWXAppScaning({
  	mount: 'qrcode-node', // 二維碼掛載點，如不寫則預設漂浮在文件中間
  	redirect: true, // 是否執行跳轉（在使用者後臺配置的URL），預設為true，相關使用者資訊回傳至url上
  	onSuccess: function(res) {}, // 登入成功後回撥函式，redirect為true時不回撥此函式
  	onError: function(error) {}, // 登入失敗後回撥函式，一般為網路問題
  	interval: 1500, // 每隔多少秒檢查一次，預設1500
  	tips: '搜尋小程式 <strong>身份管家</strong> 掃碼登入', // 提示資訊，可寫HTML
});

複製程式碼

小程式掃碼登入例項圖片

HTTP介面說明

HTTP介面適用於非JavaScript平臺，JavaScript開發者可以略過此節。

掃碼登入需要客戶端做兩個步驟：

  1. 生成二維碼
  2. 客戶端輪詢查詢掃碼狀態

還有一個步驟是使用者搜尋身份管家小程式進行掃碼登入，這塊Authing已經做好，不需要開發者操心。

1. 生成二維碼

地址：https://oauth.authing.cn/oauth/wxapp/qrcode/:clientId?random=RANDOM_STRING

  • 請求方法:

    • GET

  • 引數:

    • {String} clientId
      • 即將登入的Authing應用Id
    • {String} random
      • 客戶端生成的隨機字串

  • 返回資料:

    • {
	"data": {
		"_id": "*********************",
		"client": "*********************",
		"oauth": "*********************",
		"oauthWithApplication": "*********************",
		"qrcode": "https://usercontents.authing.cn/wxapp/qrcode/SweuVjfoPwSUTVEUv.png",
		"expiredAt": "2018-07-16T12:56:03.000Z",
		"__v": 0,
		"createdAt": "2018-07-16T12:55:03.302Z",
		"redirect": "",
		"success": false,
		"used": false
	},
	"code": 200
}
複製程式碼
    • 返回資料中data中的qrcode即二維碼地址，可直接先客戶端顯示。
    • 若處理成功，code為200，非200都為失敗。

2. 輪詢查詢掃碼狀態

地址：https://oauth.authing.cn/oauth/wxapp/confirm/qr?random=RANDOM_STRING

  • 請求方法:

    • POST

  • 引數:

    • {String} random
      • 在第一步生成二維碼時客戶端生成的隨機字串

  • 返回資料:

    • {
	"data": {
		"code": 200,
		"message": "掃碼登入成功",
		"data": {
			"_id": "*********************",
			"email": null,
			"emailVerified": false,
			"username": "ivy",
			"nickname": "ivy",
			"company": "",
			"photo": "https://wx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTLkQc7PfrbBqFMib6lkPUxaA5UsMiadibfWQtKv0CBcKnH2khXicvUB9WB2ibYxN6GRTaTsQfPtlsAafBg/132",
			"browser": "",
			"token": "******************************************.*********************.*********************",
			"tokenExpiredAt": "Wed Aug 01 2018 15:59:42 GMT+0800 (CST)",
			"loginsCount": 14,
			"lastLogin": "Tue Jul 17 2018 15:59:42 GMT+0800 (CST)",
			"lastIP": "*********************",
			"signedUp": "Tue Jul 17 2018 11:15:03 GMT+0800 (CST)",
			"blocked": false,
			"isDeleted": false,
			"__typename": "ExtendUser"
		},
		"redirect": "http://sample.authing.cn/#/redirect"
	},
	"code": 200
}
複製程式碼
    • redirect為使用者在Authing控制檯中配置的回撥地址，開發者可自行回撥到此地址
    • 如果使用者已掃碼，則code為200，若為非200，則代表使用者未掃碼或掃碼失敗

相關文章