★Firebase(支援Android、iOS、網頁的app雲端開發平台)
協助app開發者在雲端快速建置後端服務,提供即時資料庫,有效縮短app開發時間,並幫助開發者更專注在前端的優化
一.FirebaseAuth
1.創建Email
Firebase登入方式 啟用電子郵件/密碼
FirebaseAuth.getInstance().createUserWithEmailAndPassword(email, password)
再利用非同步addOnCompleteListener來判斷是否成功
--------------------------------------------------------------------------------
2.登入Email
Firebase登入方式 啟用Email
FirebaseAuth.getInstance().signInWithEmailAndPassword(email, password)
--------------------------------------------------------------------------------
3.登出
FirebaseAuth.getInstance().signOut()
--------------------------------------------------------------------------------
4.查詢會員Email
FirebaseAuth.getInstance().currentUser.email
--------------------------------------------------------------------------------
5.發送驗證Email
FirebaseAuth.getInstance().currentUser.sendEmailVerification()
再利用非同步addOnCompleteListener來判斷是否成功
--------------------------------------------------------------------------------
6.查詢Email是否驗證
FirebaseAuth.getInstance().currentUser.isEmailVerified
--------------------------------------------------------------------------------
7.監聽是否有登入
實現AuthStateListener
複寫onAuthStateChanged
在onStart裡註冊監聽
FirebaseAuth.getInstance().addAuthStateListener(this)
在onStop裡移除監聽
FirebaseAuth.getInstance().removeAuthStateListener(this)
--------------------------------------------------------------------------------
8.導入Google信任帳號
Firebase登入方式 啟用Google
搜尋網頁google play services gradle導入Google Account Login函示庫
Layout>Containers裡面的view拉出來選擇SignInButton(com.google.android.gms.common)設定id
8.1初始化客戶端屬性
private lateinit var googleSignInClient: GoogleSignInClient
8.2建立登入相關選項
val gso = GoogleSignInOptions.Builder(GoogleSignInOptions.DEFAULT_SIGN_IN)
.requestIdToken(getString(R.string.default_web_client_id))
.requestEmail()
.build()
8.3產生客戶端物件
googleSignInClient = GoogleSignIn.getClient(this, gso)
8.4設定按鈕監聽器
google_sign_in.setOnClickListener {
startActivityForResult(googleSignInClient.signInIntent, RC_GOOGLE_SIGN_IN)
}
8.5取得傳回的資料並把憑證送給Firebase來做
override fun onActivityResult(requestCode: Int, resultCode: Int, data: Intent?) {
super.onActivityResult(requestCode, resultCode, data)
if (requestCode == RC_GOOGLE_SIGN_IN) {
val task = GoogleSignIn.getSignedInAccountFromIntent(data) //取得回傳資料
val account = task.getResult(ApiException::class.java)
Log.d(TAG, "onActivityResult: ${account?.id}")
val credential = GoogleAuthProvider.getCredential(account?.idToken, null) //創建憑證需要帳戶的Token
FirebaseAuth.getInstance()
.signInWithCredential(credential)
.addOnCompleteListener {
if (it.isSuccessful) {
setResult(Activity.RESULT_OK)
finish()
} else {
Log.d(TAG, "onActivityResult: ${it.exception?.message}")
Snackbar.make(main_signin, "Firebase authentication failed", Snackbar.LENGTH_LONG).show()
}
}
}
}
二.FirebaseUI(firebase-ui-auth)
1.創建登入畫面增加Email認證與Google認證和Logo
startActivityForResult(AuthUI.getInstance().createSignInIntentBuilder()
.setAvailableProviders(Arrays.asList(
AuthUI.IdpConfig.EmailBuilder().build(),
AuthUI.IdpConfig.GoogleBuilder().build()
))
.setIsSmartLockEnabled(false)
.setLogo(R.drawable.shop)
.build(),
RC_SIGNIN)
--------------------------------------------------------------------------------------------
2.導入Facebook驗證
Firebase登入方式 啟用Facebook
加上AuthUI.IdpConfig.FacebookBuilder().build()
搜尋網頁facebook developer
我的應用程式>新增應用程式>取專案名稱>整合Facebook登入
2.1取得應用程式ID與密鑰
設定>基本資料>隱私政策網址(http://litotom.com/privacy/)>類別(教育)
2.2新增平台:
拉到最下面>Android>把package名稱丟進去>跟第一個畫面>金鑰雜湊碼(晚點)
2.3Android與Facebook連結
產品>快速入門>導入implementation 'com.facebook.android:facebook-android-sdk:[4,5)'
>確認套件名稱>取得雜湊碼(在Gitbash輸入 keytool -exportcert -alias androiddebugkey -keystore
~/.android/debug.keystore | openssl sha1 -binary | openssl base64)
>輸入密碼(android)>獲得雜湊碼>單一登入(是)>(用全名application,facebook)>Firebase取得OAuth重新導向URI
>產品>設定>有效的OAuth重新導向URI>URI驗證程式>上方狀態開啟
--------------------------------------------------------------------------------------------
3.導入電話號碼認證
Firebase登入方式 啟用電信業者
加上AuthUI.IdpConfig.PhoneBuilder().build()
Firebase可以模擬電話號碼輸入電話號碼與驗證碼
3.1設定預設國碼與順序
val whiteList = listOf("tw", "hk", "cn", "au")
setWhitelistedCountries(whiteList)
setDefaultCountryIso("tw")
--------------------------------------------------------------------------------------------
4.客製化樣式與元件
搜尋網頁colorion>popular
4.1color裡配置顏色
<|color name="popular_yellow">#82CC00
<|color name="popular_blue">#283B51
<|color name="popular_cyan">#EAF5D2
4.2styles建立新的主題(主色調,深色主色調,特性,正在使用元件)
<|style name="SingUp" parent="FirebaseUI">
- @color/popular_blue
- @color/popular_cyan
- @color/popular_yellow
- @color/popular_blue
<|/style>
4.3FirebaseUI主題更換
setTheme(R.style.SingUp)
4.4定義自己的layout並把相關的id配對上
val myLayout = AuthMethodPickerLayout.Builder(R.layout.sign_up)
.setEmailButtonId(R.id.signup_email)
.setGoogleButtonId(R.id.signup_google)
.setFacebookButtonId(R.id.signup_facebook)
.setPhoneButtonId(R.id.signup_sms)
.build()
setAuthMethodPickerLayout(myLayout)
三.Firestore
1.增加資料
以測試模式啟動
分為(Collection,Document)
資料>新增集合>取名>欄位(title) 類型(string) 值(電腦)>儲存
--------------------------------------------------------------------------------------------
2顯示資料庫內容到recyclerView
設計data class>設計ViewHolder>設計layout
2.1查詢Firestore裡面資料
val query = FirebaseFirestore.getInstance()
.collection("items")
.limit(10)
2.2查到的資料丟到選項
val options = FirestoreRecyclerOptions.Builder-
.setQuery(query, Item::class.java)
.build()
2.3選項丟到adapter裡面
val adapter = object : FirestoreRecyclerAdapter
- (options) {
override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ItemHolder {
val view = layoutInflater.inflate(R.layout.item_row, parent, false)
return ItemHolder(view)
}
override fun onBindViewHolder(holder: ItemHolder, postion: Int, item: Item) {
holder.bindTo(item)
}
}
--------------------------------------------------------------------------------------------
3.取得Document ID
在onBindViewHolder裡
snapshots.getSnapshot(postion).id
四.FireStorage
1.增加資料
新增資料夾>開始使用>上傳檔案>右方檔案位置(一個是google-cloud-storage,一個是https)
五.Firebase Hosting
1.網頁設計
https://html5-editor.net/
用記事本存成html
1.1下載node.js
google搜尋node.js 左邊穩定版 右邊最新版
1.2開始建立Hosting
打開cmd>npm i -g firebase-tools>切換到要hosting網頁的資料夾>詢問是否要把資料給firebase參考
>firebase login>firebase init>y>選擇Hosting(空白鍵選擇)>使用default>enter>enter
>打開Firebase專案設定>專案ID>firebase use --add 專案ID>接著把要hosting的html丟到public資料夾裡面
>firebase deploy(網站上傳到Firebase Hosting)
1.3開啟網站
網域+名稱.html