title: [Learning Notes] LINE Bot Developer Guide Explained - 5. LINE Login (Supplement)
published: false
date: 2021-07-11 00:00:00 UTC
tags:
canonical_url: http://www.evanlin.com/line-bot-guide-5/
---
## Preface:
Hello everyone, I am Evan Lin, a Senior Development Technology Promotion Engineer at LINE Taiwan. Today's article explains in detail the "LINE Bot Developer Guide" presentation document. This document is from the [Development guidelines](https://developers.line.biz/en/docs/partner-docs/development-guidelines/) presentation, considering that it has not been officially announced and localized in Chinese in Taiwan. This time, we are collaborating with the headquarters to prepare a Chinese version, and we are also using this series of articles to explain it, hoping to provide more understanding for more developers. The [Development guidelines](https://developers.line.biz/en/docs/partner-docs/development-guidelines/) document has a lot of content, and this presentation will also be explained in five articles. This article is the fifth article, mainly explaining LINE Login and the things to pay attention to during development.
## Article Index:
#### Full presentation link: [https://speakerdeck.com/line\_developers\_tw2/line-bot-developer-guideline-chinese](https://speakerdeck.com/line_developers_tw2/line-bot-developer-guideline-chinese)
I hope you can continue to follow:
1. [About LINE Bot](https://www.evanlin.com/2021-05-25-line-bot-guide-1/)
2. [Notes on using Webhook URL to receive requests](https://www.evanlin.com/line-bot-guide-2/)
3. [Notes on sending API requests](https://dev.to/evanlin/line-bot-3-api-1jhn-temp-slug-126169)
4. [LINE Login (this article)](https://dev.to/evanlin/line-bot-4-line-login-38gg-temp-slug-1876989)
5. [LINE Login (Supplement) (this article)](http://www.evanlin.com/line-bot-guide-5/)
6. Other related functions
This article will focus on the first section, which is pages 47 to 30.
## LINE Login (Supplement)
<script async="" data-slide="47" data-id="0e9f6182ae864568a5940cbad5ef4bec" data-ratio="1.77777777777778" src="//speakerdeck.com/assets/embed.js"></script>
This note will bring out the following related items.
-
Regarding measures to prevent the illegal use of state
- User flow examples of LINE Login according to different OS processes (iOS)
- User flow examples of LINE Login according to different OS processes (Android)
- Login flow of external browsers (schematic diagram)
- About the setting method of the target browser
The following will explain each page in detail:
## Regarding measures to prevent the illegal use of state
<script async="" data-slide="48" data-id="0e9f6182ae864568a5940cbad5ef4bec" data-ratio="1.77777777777778" src="//speakerdeck.com/assets/embed.js"></script>
This mainly mentions the usage of the state parameter. For detailed steps, you can refer to the tutorial blog [How to develop OAuth2 PKCE through Golang – taking LINE Login as an example](https://engineering.linecorp.com/zh-hant/blog/pkce-line-login/). Here is also a list of the usage flow instructions in the official article:
There are two diagrams to compare and see more clearly. Since `state` is a string of text randomly generated by the website (or App) developer. It can be used for checking to avoid Open ID requests being attacked by a man-in-the-middle and sending strange messages. Here are also some development guidelines for `state`:
- The `state` text itself should be meaningless and cannot be guessed by others.
- The `state` text should be different for each authentication request in order to provide protection.
#### Reference articles:
- [How to develop OAuth2 PKCE through Golang – taking LINE Login as an example](https://engineering.linecorp.com/zh-hant/blog/pkce-line-login/)
- [Ten things you must know when developing LINE chatbots](https://engineering.linecorp.com/zh-hant/blog/line-device-10/)
## User flow examples of LINE Login according to different OS processes (iOS)
<script async="" data-slide="49" data-id="0e9f6182ae864568a5940cbad5ef4bec" data-ratio="1.77777777777778" src="//speakerdeck.com/assets/embed.js"></script>
The following two are examples of user flows generated when performing LINE Login according to different OS. Because there are slight differences between iOS and Android, two slides are specifically used to explain. First, in this iOS slide, the flow of using LINE Login in LINE and external browsers (Safari, Chrome) is described:
- **In-App Browser (LINE)**:
- Open LINE App -> Agree screen (first time only) -> Open the website of the in-app browser (IAP: In-App-Browser).
- **External browser login (Safari, Chrome):**
- Automatically open LINE App -> Agree screen (first time only) -> Open the automatic login screen -> Open the website of the in-app browser (IAP: In-App-Browser).
## User flow examples of LINE Login according to different OS processes (Android)
<script async="" data-slide="49" data-id="0e9f6182ae864568a5940cbad5ef4bec" data-ratio="1.77777777777778" src="//speakerdeck.com/assets/embed.js"></script>
It can be found that the difference between Android and iOS is that when using an external browser to open a URL, the only difference is that LINE App will be asked. The following is a detailed description:
- **External browser login (Safari, Chrome):**
- **Ask if you want to open LINE App** -> Automatically open LINE App -> Agree screen (first time only) -> Open the automatic login screen -> Open the website of the in-app browser (IAP: In-App-Browser).
## Login flow of external browsers (schematic diagram)
<script async="" data-slide="50" data-id="0e9f6182ae864568a5940cbad5ef4bec" data-ratio="1.77777777777778" src="//speakerdeck.com/assets/embed.js"></script>
Finally, it refers to the browsing behavior in external browsers (usually the situation of desktop computers), and here is a brief explanation:
- Log in to obtain user consent
- Check if the browser has a login record
- If not logged in, check if there is a Universal Link (Note: that is, a way to directly open the App, which usually does not exist on desktop systems). If not, it will open a webpage to log in to LINE.
- Complete the login and continue to Redirect to the URL set by LINE Login.
The main difference here is that if the user is on the desktop to use LINE Login, they may enter the account and password input screen. However, many users often forget the LINE account and password they originally applied for, and at this time, they can actually log in through a QR Code.
And, LINE Login can also know how the user logged in:
- [Auto login](https://developers.line.biz/en/docs/line-login/integrate-line-login/#line-auto-login) refers to logging in directly to the system through the automatic login settings.
- [Log in with email address](https://developers.line.biz/en/docs/line-login/integrate-line-login/#mail-or-qrcode-login) This is to use the email account and password to log in.
- [Log in with QR code](https://developers.line.biz/en/docs/line-login/integrate-line-login/#mail-or-qrcode-login) This is to use the QR Code and then scan it with a mobile phone to log in.
- [Single Sign On (SSO) login](https://developers.line.biz/en/docs/line-login/integrate-line-login/#line-sso-login) Log in through SSO.
#### Related documents:
- [LINE Login: User authentication](https://developers.line.biz/en/docs/line-login/integrate-line-login/#authentication-process)
## About the setting method of the target browser
<script async="" data-slide="51" data-id="0e9f6182ae864568a5940cbad5ef4bec" data-ratio="1.77777777777778" src="//speakerdeck.com/assets/embed.js"></script>
When using LINE Login, it is loaded according to the three slides above. That is, the In-App-Browser in iOS and Android Apps and the way to log in through an external browser. But if you need to specify opening a certain login method (for example: you must use an external browser), you can refer to the content of this article:
- **External Browser:**
- Add `openExternalBrowser=1` in the URL parameters. For related documents, please refer to [Opening a URL in an external browser](https://developers.line.biz/en/docs/line-login/using-line-url-scheme/)
- **Specify opening with Chrome In-App-Browser in Android (Opens target URL in a Chrome custom tab):**
- Use `openInAppBrowser=0` in the URL parameters. For related documents, please refer to [Opening a URL in an external browser](https://developers.line.biz/en/docs/line-login/using-line-url-scheme/)
#### Related documents
- [Opening a URL in an external browser](https://developers.line.biz/en/docs/line-login/using-line-url-scheme/)
## Conclusion:
The above is the supplement and sharing of the fifth part of the "LINE Bot Developer Guide". If you want to know more, you can check the full presentation or find other articles to learn.
Want to know more about developer activities? Join the "LINE Developer Official Community" official account immediately, and you can receive the first-hand Meetup activities, or push notifications of the latest news related to the developer program. ▼
"LINE Developer Official Community" Official Account ID: @line\_tw\_dev 
Evan Lin
Posted on • Originally published at evanlin.com on
LINE Bot Developer Guide: LINE Login (Supplement)
For further actions, you may consider blocking this person and/or reporting abuse
Top comments (0)