Skip to content
Line Engineering
  • Blog
  • Engineering Culture
  • Open Source
  • Careers
  • LINE Developers
  • 繁體中文

LINE Bot 開發者指南詳解 – 5. LINE Login (補充)

By Evan Lin | 2021.07.14 2021.08.24

LINE Taiwan Technical Evangelist

前言:

各位好, 我是 LINE Taiwan 資深開發技術推廣工程師 – Evan Lin。 今天這篇文章為各位詳細解釋 「 LINE Bot 開發指南」這一份投影片文件。這一份文件是來自於 Development guidelines 的投影片,考量到在台灣還沒有正式的公布與中文化。這一次跟總部共同合作準備中文版本之外,並且特定用這一系列文章加以解釋,希望可以讓更多開發者有更多的了解。 Development guidelines 文件內容很多,本份投影片也將以六篇文章的篇幅來加以解釋。本篇文章為第五篇文章,主要講解的會是關於 LINE Login 與開發時候需要注意的事項。

文章索引:

完整投影片鏈結: https://speakerdeck.com/line_developers_tw/line-bot-developer-guideline-chinese

希望各位可以持續關注:

  1. 關於LINE Bot
  2. 使用Webhook URL接收請求時的注意事項
  3. 發送 API 請求時的注意事項
  4. LINE Login
  5. LINE Login (補充)(本篇文章)
  6. 其他相關功能

本篇文章將專注在第一個段落,也就是 Page 47 ~ Page 30 的部分。

LINE Login (補充)

本篇注意事項中,將會帶出以下的相關項目。

  • 關於防止以 state 不法使用的對策
  • 依照不同流程 OS 進行 LINE Login 的用戶流程範例 (iOS)
  • 依照不同流程 OS 進行 LINE Login 的用戶流程範例 (Android)
  • 外部瀏覽器的登入流程(示意圖)
  • 關於轉換目標端瀏覽器的設定方法

以下開始將會逐一針對每一個頁面詳細解釋:

關於防止以 state 不法使用的對策

這邊主要是提到 state 參數的使用方式, 詳細的步驟可以參考教學部落格 如何透過 Golang 開發 OAuth2 的 PKCE – 以 LINE Login 為例 。這邊也有列出在官方文章中的使用流程說明:

img

有兩張圖來對照可以看得更清楚,由於 state 是網站(或是 App) 開發商所隨機產生出來的一串文字。可以做為檢查之用,避免 Open ID 的需求被中間人攻擊後發送奇怪的訊息。這邊也提供一些作為 state 的開發指南:

  • state 文字本身應該是沒有任何意義的,無法被其他人所猜透。
  • state 文字每一次的認證請求應該都需要不同,才能做到保護。

參考文章:

  • 如何透過 Golang 開發 OAuth2 的 PKCE – 以 LINE Login 為例
  • 開發LINE聊天機器人不可不知的十件事

依照不同流程 OS 進行 LINE Login 的用戶流程範例 (iOS)

以下兩個是根據不同的 OS 進行 LINE Login 的時候產生的使用者流程的範例,因為 iOS 跟 Android 兩者有些許的差異,特地使用兩張投影片來解釋。首先在這張 iOS 的投影片裡面有敘述在 LINE 裡面跟外部瀏覽器(Safari, Chrome) 使用 LINE Login 的流程:

  • 應用程式內瀏覽器 (LINE) :
    • 開啟 LINE App -> 同意畫面(僅第一次) -> 開啟應用程式內瀏覽器(IAP: In-App-Browser) 的網站。
  • 外部瀏覽器登入 (Safari, Chrome):
    • 自動開啟 LINE App -> 同意畫面(僅第一次) -> 開啟自動登入畫面 -> 開啟應用程式內瀏覽器(IAP: In-App-Browser) 的網站。

依照不同流程 OS 進行 LINE Login 的用戶流程範例 (Android)

可以發現 Android 開啟上跟 iOS 差別就是使用外部瀏覽器開啟網址的時候,唯一的差異就是開啟 LINE App 會有相關的詢問。以下詳細敘述如下:

  • 外部瀏覽器登入 (Safari, Chrome):
    • 詢問是否要開啟 LINE App -> 自動開啟 LINE App -> 同意畫面(僅第一次) -> 開啟自動登入畫面 -> 開啟應用程式內瀏覽器(IAP: In-App-Browser) 的網站。

外部瀏覽器的登入流程(示意圖)

最後是指在外部瀏覽器(通常是指桌機的狀況)的瀏覽行為,這裡也稍微解釋一下:

  • 登入取得使用者同意( User Consent)
  • 查看瀏覽器是否有過去登入的紀錄
  • 如果沒有登入過,會查看是否有 Universal Link (註解: 也就是可以直接開啟 App 的方式,通常在桌面系統是不會有的)。如果沒有,就會開啟網頁登入 LINE 。
  • 完成登入,繼續 Redirect 到當初 LINE Login 設定的網址。

這邊主要差別就是,使用者如果是在桌面上來透過 LINE Login 這時候可能會進入帳號密碼的輸入畫面。但是許多使用者往往都忘記當初申請 LINE 的帳號跟密碼,這時候其實也是可以透過 QR Code 來登入。

並且, LINE Login 也可以知道使用者是如何登入:

  • Auto login 指的透過自動登入的設定,直接登入到該系統。
  • Log in with email address 這邊就是使用 Email 的帳號跟密碼來登入。
  • Log in with QR code 這邊是使用 QR Code 然後透過手機掃描來登入ˋ。
  • Single Sign On (SSO) login 透過 SSO 來登入。

相關文件:

  • LINE Login: User authentication

關於轉換目標端瀏覽器的設定方法

在使用 LINE Login 的時候,就是依照上述三頁投影片的方式來載入。 也就是 iOS 與 Android 中 App 中的 In-App-Browser 以及透過外部瀏覽器的方式來登入。但是如果有需要指定開啟某一個登入方式(比如說:一定要透過外部瀏覽器),可以參考本篇的內容:

  • 外部瀏覽器 (External Browser):
    • 在 URL 的參數中加上 openExternalBrowser=1 ,相關的文件可以參考 Opening a URL in an external browser
  • 在 Android 中指定使用 Chrome In-App-Browser 開啟 (Opens target URL in a Chrome custom tab ):
    • 在 URL 的參數中使用 openInAppBrowser=0 ,相關文件可以參考 Opening a URL in an external browser

相關文件

  • Opening a URL in an external browser

結論:

以上就是「LINE Bot 開發指南」第五部分的補充與分享,想要知道更多內容可以查看完整投影片,或是找到其他篇的文章來了解。

想了解更多開發者的活動? 立即加入「LINE 開發者官方社群」官方帳號,就能收到第一手 Meetup 活動,或與開發者計畫有關的最新消息的推播通知。▼

「LINE 開發者官方社群」官方帳號 ID:@line_tw_dev img

#chatbot #LINE Chatbot #LINE Login #LINE messaging API

Related Posts

  • 透過 Vue + FastAPI 完成 LINE Login 一鍵式登入 碰巧最近有個日文五十音消除遊戲的 Side Project 正在實作中,參考之前鐵人賽文章,實作上發現有些內容可能是年久失修,導致實作上不太順利,碰巧近期 LINE Login 的官方文件也有更新,並且搭配之前實作的範例是使用 (Screen-LINE-Bullets),來延伸 Side Project,以下就為各位介紹一下其中使用 LINE Login 的一些過程。
  • LINE Bot 開發者指南詳解 – 3 發送 API 請求時的注意事項 各位好, 我是 LINE Taiwan 資深開發技術推廣工程師 – Evan Lin。 今天這篇文章為各位詳細解釋 「 LINE Bot 開發指南」這一份投影片文件。本篇文章為第三篇文章,主要講解的會是關於發送 API 請求的時候需要注意的事項。
  • 20190723 Chatbots 11 at 天瓏書局 Coding Space 心得分享 很開心受到 chatbot 社群邀請參加 “Chatb10ts meetup 聊天機器人小小聚 11 @ 天瓏書局 Coding Space”,分享 LINE API 更新與個人開發的心得,並希望透過社群分享的力量能夠讓聊天機器人的開發動能更加的盛大。

Search

Generic selectors
Exact matches only
Search in title
Search in content

Top Tags

  • Security
  • Open Source
  • Agile

Tags

AI Armeria BECKS chatbot chatbot community COSCUP Data/AI Data Dev Dev Culture DevRel Golang Hackathon iOS Java java JavaScript Kubernetes LIFF LIFF LINE LINE Chatbot LINE Chatbot LINE DEVELOPER DAY LINE Developer Meetup LINE Developers LINE Fukuoka LINE Games LINE Login LINE TECH FRESH LINE Things machine learning Messaging API ML Open Source recruitment Server-side Share Target Picker summer homework TechPulse Test Automation Verda Vue Web Development 資安
  • About LINE
  • LINE Developers
  • Careers
  • Contact
Menu
  • About LINE
  • LINE Developers
  • Careers
  • Contact
  • Facebook
  • Twitter
  • Youtube
  • Slideshare
Menu
  • Facebook
  • Twitter
  • Youtube
  • Slideshare
©LINE Corp Privacy Policy