LINE Login – LINE 提供的免費登入機制

行動版 for , 瀏覽人次: 7592  , SSL Connection SSL
  • Let LINE users easily log in and connect to your app !

    每當我們在網站或是APP內要結帳或是登入時,總需要一道輸入帳號密碼的手續,為了簡化與方便使用者,所以有使用第三方帳號登入的機制,像是使用 FB 或是 GOOGLE 的帳號登入,就可以節省不少時間,也可以避免顧客跑單啊~ (拜託PM不要再叫我介接一堆第三方登入了…)

     

    根據尼爾森媒體( Nielsen )的調查, 12-65 歲的台灣民眾,有將近 91% ,也就是將近 1,700 萬人都在使用 LINE 。至於全球,則有以下宣告數據:

    line-login-thumb0-en
    上圖引用自官網

    台灣用LINE的人太多了,歐美地區反而沒有那麼多人用LINE,到美國去,大家還是用MESSENGER 、WhatsApp、iMessage 比較多~

    至於在中國,很抱歉,LINE是不通行的!請用QQ、微信、Wechat吧 ~ BYE BYE

    LINE的野心很大,服務包山包海,LINE也有提供LINE Login,是免費的登入機制,以下為不同瀏覽器所導引而呈現出不同的輸入帳密畫面,帳號密碼在原網站是得不到的,如果是APP內登入,還可以自動登入,連輸入帳密都不用!

    Screenshot_20180824-113509_Samsung Internet

    備註:登入的帳號,LINE APP內需有勾選 允許自其他裝置登入,勾選位置在LINE APP內的設定->我的帳號->允許自其他裝置登入

    只要是你登入過的網站或APP,都可以在 LINE APP內看到紀錄,並可以取消連動,到LINE APP內的設定->我的帳號->連動中的應用程式,即可看到列表紀錄!真的是凡走過必留下痕跡喔~

    下面是比較技術性的說明,適合技術人員閱讀。


    如何申請LINE Login呢?

    1. Creating a channel,到這邊看詳細說明:點我前往

    要先準備一個App icon來代表你,Under 3MB; JPEG/PNG/GIF/BMP。
    Channel ID就是你的唯一識別ID。
    Channel secret 要保存好。
    App type 有分:LINE Login (WEB) 或 LINE Login (NATIVE_APP)。
    如果要取得登入者的Email , 在OpenID Connect下的Email,需上傳截圖。(Agree to the application terms and upload a screen shot of the screen that explains to the user why you need to obtain their email address and what you will use it for.)
    Callback URL是登入者登入後導回的網址,如有多個,輸入時要換行再輸入!(Max: 400 lines) 。

    設定過程不會太久,且設定完幾分鐘就可使用。

     

    2. 在自己的頁面上放一個 LINE 登入按鈕
    login-button-en-56a6ccdd.png
    上圖引用自此,請前往觀看設計規範
    將用戶導入到此API,按鈕的連結網址會像是這樣:

    https://access.line.me/oauth2/v2.1/authorize?response_type=code&client_id=xxxxx&redirect_uri=xxxxx&state=xxxxx&scope=openid%20email%20profile

    要特別注意scope的參數,如果想要取得用戶的 Email,需要同時帶入openid和email ! 並且以%20分隔。

    https://access.line.me/oauth2/v2.1/authorize
    

    SCOPES

    • profile: Permission to get the user’s profile information.
    • openid: Used to retrieve an ID token. For more information
    • email: Permission to get the user’s email address. openid must be specified at the same time.

    如果用戶成功登入,LINE會導回Callback URL,並在網址上自動帶回 code:

    http://xxxx.com?code=xxxx&state=93873836f8a54ee8b4d5998a2823f515

    code很重要!只能用一次!並有十分鐘效期,我們要用它來呼叫另一支API:  https://api.line.me/oauth2/v2.1/token 以便取得 access token要取得access token,我們才能終極取得用戶的 profile資料!

    請下載這個免費軟體 POSTMAN 來協助你測試與除錯,點下圖前往下載:
    Image 27.png


    3. 用POST方法呼叫 https://api.line.me/oauth2/v2.1/token,在POSTMAN中,我們可以看到需帶入以下參數:

    Image 28.png

    如果成功呼叫,會回傳JSON response.

    {
        "access_token": "bNl4YEFPI/hjFWhTqexp4MuEw5YPs...",
        "expires_in": 2592000,
        "id_token": "eyJhbGciOiJIUzI1NiJ9...",
        "refresh_token": "Aa1FdeggRhTnPNNpxr8p",
        "scope": "profile",
        "token_type": "Bearer"
    }

    自此,這邊回傳的Access token,效期可長達30天!30天內都可以持這個Access token免死金牌,向LINE取得用戶Profile資料。

    你也可以另外呼叫GET https://api.line.me/oauth2/v2.1/verify,來驗證Access token免死金牌的有效性。技術人員可以看詳細的 Social API v2.1 reference


    4. Getting user profiles (向LINE取得用戶Profile資料)

    用GET方法呼叫 https://api.line.me/v2/profile,在POSTMAN中,我們可以看到需帶入以下參數:

    Image 30.png

    可以取得 (回傳) 哪些資料呢?
    可以取得 userId 來跟你自己的平台做 mapping !
    可以取得displayName,就是用戶在 LINE顯示的名稱
    可以取得pictureUrl,就是用戶在 LINE顯示的大頭照片
    可以取得statusMessage,就是用戶在 LINE顯示的ˋ狀態文字,如果他沒有狀態文字就不會回傳此項!

    如果成功呼叫,會回傳JSON response.

    {
      "userId":"U4af4980629...",
      "displayName":"Brown",
      "pictureUrl":"https://example.com/abcdefghijklmn",
      "statusMessage":"Hello, LINE!"
    }
    以上就是基本的流程,技術人員可以看詳細的 Social API v2.1 reference,就麻煩移駕前往官方文件研究囉~ 


回 文章列表頁