[Flutter Note] - 串接 LINE, Facebook Login

Introduction & 前言

Banner

這是一篇紀錄及分享如何透過 Flutter 串接 Line 還有 Facebook Login 的文章。

註:這是筆者地第一次透過 Flutter 串接第三方服務,如果有錯誤的地方還請各路大神盡量幫忙指出。


Summary & 摘要

本篇文章預設學習前的基本條件需求:

  • 已經安裝完 Flutter 環境
  • 知道如何使用 Flutter 安裝套件
  • 知道如何基本操作 Flutter 及基本的排版

如果你還不知道 Flutter 怎麼安裝,可以參考筆者分享的另一篇文章 [Flutter Note] - 前端拓展技能樹之 Flutter 安裝篇[macOS]

本篇文章將有以下幾個步驟,最終我們將可以在 Flutter 上串接第三方登入:

  1. 創建 Line Developer 的相關資訊
  2. 串接 Line Flutter SDK
  3. 創建 Facebook Develop 的相關資訊
  4. 串接 Facebook SDK

創建 Line Developer 的相關資訊

Line Developer

首先我們需要先創建 Line Developer 的一些相關資訊,主要有以下幾個需要創建

Provider

Provider Create

首先我們點擊 Provider Create,後續你創建的每一個 Channel(Login channel, messaging channel, blockchain channel…),都可以放置在不同的 Provider 內,所以 Provider 可以依照你的選擇去分類創建。

Provider Name

例如我想要有一個專門拿來 DemoProvider,後續不管我有什麼樣子的 Login channel,例如 A 專案用的、B 專案用的,我都可以丟到這個 Provider,亦或者我可以使用不同專案的想法來規劃我的 Provider,可以把 Provider 依照專案名稱來分類,例如我的 Provider 就叫做 A Project

Provider Channels

創建成功後會看到內容都是空的,這時候我們需要先創建一個 Line Login Channel,後續我們的專案就會透過這個 Login Channel 去登入。

當然我們可以很多個專案共用一個 Login Channel,這時候就需要看你的需求了,如果使用者在你多個專案都共用同一個 Login Channel 去登入,那麼後續你透過 Line API 拿到的使用者 UUID 都會是同一份。

接下來請點擊 Create a LINE Login channel

Line Login Channel

Line Login Channel

點擊完後會跳頁,然後在裡面輸入必填資訊。

Region to provide the service 改為 TaiwanCompany or owner’s country or region 也選擇為 Taiwan

Channel nameChannel description 依照自己的喜好進行輸入。

App types 則選擇 Mobile App,如果你有需求是這個 Login 會硬用到 Web,也可以一併勾起來。

最後勾選同意 I have read and agree to the LINE Developers Agreement,之後就可以送出了。

Line Login Channel Info

成功之後就能看到你的 Line Login Channel,後續需要透過 Line SKD 操作任何關於 Login 的部分,都需要回來這邊裡面去拿一些資訊,例如 Channel IDChannel secret

Line Messaging Channel

如果有需要進行消息推播或者讓使用者加入你的頻道,後續透過頻道可以進行一些操作,也可以順手創建一下 Line Messaging Channel,這邊就先不詳細介紹,後續有時間可以再進行補上。


串接 Line Flutter SDK

待補


Conclusion & 結論

待補


參考網站