# 開始使用 LINE Login

本頁介紹如何透過部署一個簡單的 starter web app 開始使用 LINE Login,開發者可用 LINE 帳號登入此 web app,亦可存取 Social API 的部分功能。

完成本頁介紹的步驟後,開發者將更了解整合 LINE Login 所需的要素與流程。

# 必要項目:

開始之前,須先具備下列條件:

條件 敘述
LINE 帳號 LINE 聊天 app 帳號。如需建立帳號,請至 download LINE 開啟 app,並點選註冊
LINE Login channel Channel 連接開發者的 app 與 LINE Platform。每個 app 皆需要專屬的 channel 和獨有的 channel ID。請於 console 中建立 LINE Login channel (必須具有 LINE 帳號)。
請注意:
  • 如開發者從未登入 console,將被要求先以 developer 身份進行註冊。
  • Channel 依提供者 (provider) 分類,如開發者從未建立提供者,將被要求先行建立。
  • 輸入 channel 相關資料時,在 App types 選項中,請選取 Web app
Heroku 帳號 Heroku 是一項供開發者免費託管 web 應用的服務。將 starter app 部署至 Heroku,開發者便不須使用自己的 server。
Heroku CLI 特定 Heroku 功能必須透過 Heroku Command Line Interface (CLI) 操作。

# 步驟 1: 部署 Starter App

上述條件都準備好了嗎? 請依下列步驟開始使用 LINE Login:

  1. 前往 GitHub 中的 line-login-starter repository。
  2. 點選 README 檔案中的 Deploy to Heroku 按鈕。
  3. 於 Heroku 中的 "Create New App" 頁面,依照要求輸入資料:
    • Heroku app 名稱
      必須為獨有,不得重複。建議:line-login-starter-{YYYYMMDD}
    • 地區
    • 設定變數
      • Callback URL 須依照此格式: https://{Heroku app name}.herokuapp.com/auth
      • Channel ID (請至 console 取得)
      • Channel secret (請至 console 取得)
  4. 點選 Deploy app 並確認 app 已成功部署。

# 步驟 2: 設定 LINE Login Channel

  1. 前往 console 並開啟 channel 資料。
  2. 確認 Basic settings 表單中的 App types 欄位顯示 Web app
  3. LINE Login 表單中,輸入來自 Heroku (https://{Heroku app name}.herokuapp.com/auth) 的 Callback URL

# 步驟 3: 測試 App

  1. 透過 URL 開啟 app (https://{Heroku app name}.herokuapp.com)。開發者將看到:

    LINE Login starter app login

  2. 點選 Log in

    開發者將被導向標準 LINE 登入頁面。此 URL 將以 https://access.line.me/oauth2/v2.1/ 開頭,並包含數個 query parameter。如欲取得相關訊息,請查看 Integrating LINE Login with your web app

  3. 登入 LINE 並同意為 app 提供所需權限。

開發者以 LINE 憑證成功登入後,此 app 將顯示其 LINE 顯示圖片、姓名,以及狀態消息。(開發者如使用 iOS 或 Android 裝置,且已登入 LINE,將自動登入此 app。)

# 體驗 Starter App 的其他功能

登入此 app 後,開發者可點選下列按鈕,體驗更多功能:

  • Verify the user access token
  • Refresh the user access token
  • Revoke the access token (log out)

# 查看 Log

透過 Heroku CLI 查看 app log。

  1. 以 command line 登入 Heroku:

    $ heroku login
    
  2. 查看 log:

    $ heroku logs --app {Heroku app name} --tail
    

# 步驟 4: 個人化 App

將 starter app 下載至本地端 (local machine) 以進行測試與變更。之後亦可將此 app 部署至屬意的 web server。此處說明如何進行變更,並將變更部署至透過步驟 1. 建立的 Heroku app。

請先確認已成功安裝下列項目:

  • JDK 1.8 或之後版本
  • Maven™ 3.0 或之後版本
  • Git™
  1. 複製 line-login-starter GitHub repository。

    git clone https://github.com/line/line-login-starter.git
    
  2. cd into line-login-starter

  3. 將 Heroku 新增至開發者的 local repository:

    $ heroku git:remote -a {Heroku app name}
    
  4. 進行編輯並提交 (commit) 變更 (非必須):

    $ git add .
    $ git commit -m "First commit"
    
  5. 將變更推 (push) 至 Heroku master:

    $ git push heroku master
    

# 步驟 5: 發佈 Channel (非必須)

LINE Login channel 剛被建立時,其狀態為 "Developing"。此狀態的 channel 僅能被擁有 Admin 或 Tester 權限的使用者存取 (請見 Managing roles)。如欲允許其他使用者存取此 app,須先將其狀態改為 "Published"。請至 console 開啟 channel 設定,並點選頁面上方的 Developing 狀態。

若此 channel 僅用於測試,則不須變更狀態。如欲讓使用者可存取此 app,則開發者須發佈此 app 連接的 channel。

# 下一步