Authing新功能——小程序掃碼登陸

近期，Authing 發佈了新功能——小程序掃碼登陸。

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

點擊此處當即體驗小程序掃碼登陸

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

接入流程

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，則表明用戶未掃碼或掃碼失敗