主題
CocosCreator接入微信登錄獲取openid,微信登錄實現方案調研過程
特別說明
CocosCreator微信小遊戲開發系列文章,是我在逐步開發過程中,基於官方文檔之上,記錄一些重點內容,以及對官方文檔中有些知識點的補充和分析。
正文
在成語錦衣衛小遊戲基礎功能開發的差不多後,開始考慮怎麼接入微信登錄功能,或者說怎麼對接微信的用戶體系?
帶着接入微信登錄的問題,我先在CocosCreator的官方文檔找了找解決方案
1. Cocos Creator第三方服務TCB雲開發
還沒看過CocosCreator接入TCB雲開發服務的官方教程的同學,可以先看這裏
有一個注意點,啓用雲服務後,會跳轉到騰訊雲登錄界面,從cocos官網的郵件裏可以看到登錄賬號,你登錄成功後,大概率會看到類似下面的截圖
可以先忽略這些提示,直接到CocosCreator編輯器裏創建雲開發環境,然後按照TCB雲開發文檔接入就可以了
在腳本中調用雲開發的初始化:
// 初始化方法,從配置中讀取參數
this.app = cc.cloud && cc.cloud.initialize();
let auth = this.app.auth();
auth.signInAnonymously().then(res => {
// 需要先做授權才能正常調用。使用匿名登陸方式訪問雲開發資源
// 請到騰訊雲後臺 -> 雲開發 -> 選擇當前環境 -> 環境設置/登錄授權中,確認已經啓用匿名登錄
// 匿名登錄有一定限制,後期請更換爲自定義登錄等其他方式。
console.log('TCB auth succeed');
this.app.callFunction({
// 雲函數名稱,要與上傳的函數名一致
name: "function",
// 傳給雲函數的參數
data: {
a: 1
}
}).then(res => {
console.log('function', res);
}).catch(console.error);
});
跟着文檔學到這裏,也沒說怎麼微信登錄啊,繼續看文檔發現現在是匿名登陸的方式訪問雲開發資源,那是不是還有其他的登錄方式呢,果然發現其他的登錄方式,如下圖:
我選擇了“微信公衆號”,然後跳轉到雲開發指南文檔,在這裏找到微信登錄的代碼,並發現了可以獲取openid的方法
但是我在代碼中調用Provider.signInWithRedirect(),並沒有跳轉微信OAuth授權頁面,也沒有內容callback回來。後來我在Cocos文檔的TCB開發的教程最後發現了下面這句話:
原來CocosCreator使用的TCB雲開發SDK是web版本,而Web版本只能通過使用wx.login()獲取到code,然後再將code給到服務器,服務器去調用code2Session接口得到OpenID完成登陸,具體方案可以參考這裏
這種方式和我預期的差太多,最後放棄了。
2. 微信開發者工具的雲開發
既然CocosCreator的插件服務TCB雲開發集成的是Web版本的SDK,那可不可以直接用微信開發者工具的雲開發呢,這應當是最適合微信小遊戲的雲開發版本了,我們先看看微信雲開發的介紹
雲開發提供了幾大基礎能力支持:
雲函數:在騰訊雲端運行的代碼,與微信登錄鑑權的無縫整合,在小程序端調用雲函數時,傳入的參數中會被注入小程序端用戶的 openid,開發者可以直接使用該 openid。
數據庫:沒有繁瑣的後臺數據庫創建和管理問題,可以直接使用的數據庫,它是一個既可在小程序前端操作,也能在雲函數中讀寫的 JSON 數據庫。
存儲:在小程序前端直接上傳/下載雲端文件,也可以在雲開發控制檯上傳文件和可視化管理,文件支持外鏈訪問。
雲調用:在雲函數中能直接調用微信的開放能力api:比如獲取用戶基本信息和微信運動等敏感信息。
看到這裏的第一感覺,微信開發工具提供的雲開發能力節約了開發者大量接入微信登錄的時間,如果能將CocosCreator項目和微信開發者工具的雲開發能力結合起來使用,那就太省事了。
因爲篇幅問題,我把微信開發者工具的雲開發單獨放在下一章講,敬請期待!
結尾
既然您看到這了,說明文章對你還有用,幫忙點個贊再走吧,謝謝!
關注我的公衆號「掉隊程序員」,持續輸出更多內容!
自己動手寫,分解項目中的各個模塊需求,通過查文檔和搜索Cocos社區,解決碰到的問題,最終在微信上線了下面這款微信小遊戲《成語錦衣衛》,歡迎大家掃碼體驗,並作爲參考項目模版,開發出屬於自己的小遊戲
預告
下一節和朋友們說一說:Cocos Creator使用微信雲開發和微信開放能力