這幾個禮拜在公司串第三方登入和第三方支付花了不少時間
因此想做個筆記
Cocos Creator版本:2.3.2
NDK : 21.0.6113669 (Android Studio上下載的最新版)
SDK : Android Studio上載的最新版
系統:Window
目標平台:Android
這邊我是先建立一個新的專案用來演示登入效果
文末會再貼上專案下載連結
平常我自己是用typescript做開發
所以我是新建一個helloworld-typescript 專案
建完後請先確認自己新建專案能否打包APK成功
再寫本文時就有遇到項目編譯APK時出現
externalNativeBuildReleaseFeature的錯誤
好像是我資料夾名稱出現_底線報錯
我改檔案名稱就好了
能成功打包APK後,可以來開始安裝SDKBOX套件
打開CocosCreator
找到SDKBox並選擇Launch
點擊import可以看到這邊提供很多SDK
找到Social選項有個Facebook點擊import
專案就安裝好FaceBook SDK了!
此時打開CocosCreator專案
項目->構建發布
上圖我說明一下我自己是甚麼場合用這四個按鈕
1.
是當我編譯失敗時出現fail如上圖,此時我點擊1按鈕會出現記事本
可以查看編譯失敗的log
2.
構建按鈕,當你新建一個乾淨的Cocos專案時,是不會有Build資料夾的,
只要點擊構建按鈕則會產生出Build資料夾
3.
編譯按鈕,當我勾選調試模式看Log,接著準備接換成release模式時,
我會再重新點擊編譯按鈕,確保打包出來的模式有更換
4.
運行按鈕,當我手機USB有連接電腦時,按下運行則會直接安裝APP到手機裡
平常我自己在做真機測試時,當只有更改程式碼時,
只需要點擊構建+運行即可同步最新code到真機上,是不必點編譯按鈕的。
回到正題安裝完FaceBook SDK後
點擊構建按鈕
構建完後接著點擊編譯按鈕會發現
編譯失敗了!
![]()
點擊上圖1的按鈕
可以查看打包出錯原因
點擊後會出現記事本
可以看到其中一行錯誤是
* What went wrong:
Execution failed for task ':game:transformClassesAndResourcesWithProguardForRelease'.
此時可以打開專案目錄下的
build\jsb-link\frameworks\runtime-src\proj.android-studio\app\proguard-rules.pro
和
build\jsb-link\frameworks\runtime-src\proj.android-studio\game\proguard-rules.pro
並且再這個兩個檔案結尾處加上
# facebook
-keep public class com.facebook.** { *; }
-dontwarn com.facebook.**
# cocos2d-x
-keep public class org.cocos2dx.** { *; }
-dontwarn org.cocos2dx.**
-keep public class com.chukong.** { *; }
-dontwarn com.chukong.**
# google play service
-keep public class com.google.android.gms.** { public *; }
-dontwarn com.google.android.gms.**
-keep class com.google.protobuf.** { *; }
-dontwarn com.google.protobuf.**
-keep class * extends java.util.ListResourceBundle {
protected Object[][] getContents();
}
-keep public class com.google.android.gms.common.internal.safeparcel.SafeParcelable {
public static final *** NULL;
}
-keepnames @com.google.android.gms.common.annotation.KeepName class *
-keepclassmembernames class * {
@com.google.android.gms.common.annotation.KeepName *;
}
-keepnames class * implements android.os.Parcelable {
public static final ** CREATOR;
}
#sdkbox
-keep class com.sdkbox.** { *; }
-dontwarn com.sdkbox.**
加完之後 再重新構建+編譯
就可以發現編譯正常了
![]()
我在這篇文章有列出更多其他打包失敗的解法
接著裝完FB SDK 環境沒問題的話,
就可以開始去FB 開發者頁面建立一個應用程式
建立好應用後會看到應用程式編號
可以先記下來後面會用到
再依照下圖操作
接著不斷的點擊繼續就好
到第三步驟時
只要按照他的說明去填即可
再來是最麻煩的第四步會看到
大意是說你需要先產生一個keystore
然後cocos專案就要使用這個key
接著再輸入keytool -exportcert指令取得到密鑰雜湊後
再填入下方選項內
詳細步驟如下:
1.產生一組keystore
keytool -genkey -v -keystore tester.keystore -alias tester -keyalg RSA -validity 10000
我這是用指令的方式產生的,也可以利用Android Studio去產生 效果都是一樣的
2.下載openssl-0.9.8e_X64檔案
我自己是下載0.9.8e版本的,下載後解壓縮放自己要的位子
3.取得密鑰
指令意思大致上是這樣
keytool -exportcert -alias {keystore別名} -keystore "{keyStore路徑}" | "{openssl.exe路徑}"sha1 -binary | "{openssl.exe路徑}" base64
以我的專案來說會是
keytool -exportcert -alias tester -keystore "C:\Users\Jim\tester.keystore" | "C:\Users\Jim\openssl-0.9.8e_X64\bin\openssl.exe" sha1 -binary | "C:\Users\Jim\openssl-0.9.8e_X64\bin\openssl.exe" base64
圖中紅框我拿到的金鑰
再把此金鑰貼到FB開發頁面的密鑰雜湊選項即可
以上是FaceBook開發者那邊的設定
接下來是SDKBox那邊的設定
FaceBook SDKBox官方文檔和API說明
Setup Android
- Make sure java -version >= 1.7
- Configure your APP on Facebook follow Android Quick Start Guide
- Open res/values/strings.xml and replace facebook_app_id with your Facebook App ID
- Open AndroidManifest.xml and replace _replace_with_your_app_id_ with your Facebook App ID
- Open project.properties and change target to target=android-15
只要設定列表中的第三行就好
第三行是打開跟目錄下的
build\jsb-link\frameworks\runtime-src\proj.android-studio\res\values\strings.xml
原本會是
<?xml version='1.0' encoding='UTF-8'?>
<resources>
<string name="app_name" translatable="false">FaceBookLogin</string>
<string name="facebook_app_id">your_app_id</string>
<string name="fb_login_protocol_scheme">fbyour_app_id</string>
</resources>
your_app_id的部分換成剛FB開發頁創立的應用程式編號
如果以我的專案舉例則會改成
<?xml version='1.0' encoding='UTF-8'?>
<resources>
<string name="app_name" translatable="false">FaceBookLogin</string>
<string name="facebook_app_id">910007862813093</string>
<string name="fb_login_protocol_scheme">fb910007862813093/string>
</resources>
接著再打開build\jsb-link\res\sdkbox_config.json
{
"debug":true,
"app_id":"填入你的FB應用程式ID",
"url_scheme_suffix":""
}
以上都調整完畢後終於來到最後一步的打包了
記得再項目構建那邊不要勾選調試模式
否則FB不會授權給你登入
除非打包選擇的金鑰是用debug.keystore
才需要勾選調試模式
主要程式碼:
//fb登入初始化
sdkbox.PluginFacebook.init();
if (cc.sys.isNative) {
if (sdkbox.PluginFacebook.isLoggedIn())
sdkbox.PluginFacebook.logout();
sdkbox.PluginFacebook.login()
sdkbox.PluginFacebook.setListener({
onLogin: (isLogin, msg) => {
},
onAPI: (tag, data) => { },
onSharedSuccess: function (data) { },
onSharedFailed: function (data) { },
onSharedCancel: function () { },
onPermission: function (isLogin, msg) { },
onGetUserInfo: (
(userInfo) => {
//使用者資料
this.label.string = sdkbox.PluginFacebook.getUserID()
}
)
});
}
成功後真機效果圖:
顯示玩家UID
大致流程基本上就是這樣
取到玩家UID後就能跟自己遊戲帳號做綁定傳給server
就能做一系列的功能了
以後有空的話,
會再寫有關SDKBOX的 Google Play Services登入
以及第三方支付功能In App Purchase的心得筆記
LINE