★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