LINE Developersのプロダクトの一つである「ウェブアプリにLINEログインを組み込む」をPythonで実装してみました。

こんな感じにできます。

LINEのAPIの過去の実装記事

PythonでLINEの「Messaging API」でテンプレートメッセージを実装してみた

PythonでLINEの「Messaging API」のクイックリプライの解説と実装

PythonでLINE Bot APIを使ってLINEユーザー情報を取得する

PythonでLINE Bot APIを使ってプッシュ通知を実装する


目次


  • LINE Developersのページに沿って設定


    • チャネルを設定する



  • 実装


    • 認可を要求する

    • アクセストークンを取得する

    • IDトークンをデコードする



  • テンプレートを用意

  • おまけ


対象


  • pythonでLINEログインを実装したい人


LINE Developersのページに沿って設定

まず、LINEログイン内に新しいチャネルを作成します。


チャネルを設定する

必要事項を入力して、チャネルを作成したら、ユーザがログイン後のリダイレクト先を設定します。


実装

ウェブアプリにLINEログインを組み込む」ページ内に実装フローが乗っているので、その流れに沿って実装します。


認可を要求する


app.py

@app.route("/line/login", methods=["GET"])

def line_login():
# 認可コードを取得する
request_code = request.args["code"]


アクセストークンを取得する

「LINE_CHANNEL_ID」「LINE_CHANNEL_SECRET」は、自身のチャネルのページに記載してあるので、コピペしてください。


app.py

LINE_CHANNEL_ID = "自身のチャネルID"

LINE_CHANNEL_SECRET = "自身のチャネルシークレット"
REDIRECT_URL = "設定したリダイレクト先のURL"

@app.route("/line/login", methods=["GET"])
def line_login():
# 認可コードを取得する
request_code = request.args["code"]
uri_access_token = "https://api.line.me/oauth2/v2.1/token"
headers = {"Content-Type": "application/x-www-form-urlencoded"}
data_params = {
"grant_type": "authorization_code",
"code": request_code,
"redirect_uri": REDIRECT_URL,
"client_id": LINE_CHANNEL_ID,
"client_secret": LINE_CHANNEL_SECRET
}

# トークンを取得するためにリクエストを送る
response_post = requests.post(uri_access_token, headers=headers, data=data_params)



IDトークンをデコードする


app.py

LINE_CHANNEL_ID = "自身のチャネルID"

LINE_CHANNEL_SECRET = "自身のチャネルシークレット"

@app.route("/line/login", methods=["GET"])
def line_login():
# 省略

# トークンを取得するためにリクエストを送る
response_post = requests.post(uri_access_token, headers=headers, data=data_params)
# 今回は"id_token"のみを使用する
line_id_token = json.loads(response_post.text)["id_token"]

# ペイロード部分をデコードすることで、ユーザ情報を取得する
decoded_id_token = jwt.decode(line_id_token,
LINE_CHANNEL_SECRET,
audience=LINE_CHANNEL_ID,
issuer='https://access.line.me',
algorithms=['HS256'])

return render_template("line_success.html", user_profile=decoded_id_token)



他のコントローラの実装


app.py

import json

import requests
import jwt
from flask import Flask, request
from flask import render_template

app = Flask(__name__)
app.config["SECRET_KEY"] = "sample1216"

LINE_CHANNEL_ID = "自身のチャネルID"
LINE_CHANNEL_SECRET = "自身のチャネルシークレット"
REDIRECT_URL = "設定したリダイレクト先のURL"

@app.route("/", methods=["GET"])
def index():
return render_template("index.html",
random_state="line1216",
channel_id=LINE_CHANNEL_ID,
redirect_url=REDIRECT_URL)

@app.route("/line/login", methods=["GET"])
def line_login():
# 省略

if __name__ == '__main__':
app.run(debug=True)



テンプレートを用意


ディレクトリ構造

テンプレートを追加する前に、ディレクトリ構造も載せておきます。

LINE_login

├── app.py
├── static
│   └── LineLoginButtonImage
│   └── images
└── templates
├── index.html
└── line_success.html

LINEから無料でダウンロードできる画像をしようして、ログインボタンを作っています。

こちらからダウンロードできます。


templates/index.html

<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="UTF-8">
<title>ログイン</title>
</head>
<body>

<h2>ログイン</h2>

<a href="https://access.line.me/oauth2/v2.1/authorize?response_type=code&client_id={{ channel_id }}&redirect_uri={{ redirect_url }}&state={{ random_state }}&scope=openid%20profile">
<img src="{{ url_for('static', filename='LineLoginButtonImage/images/DeskTop/2x/32dp/btn_login_base.png') }}"></a>

</body>
</html>



templates/line_success.html

<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="UTF-8">
<title>{{ user_profile["name"] }}</title>
</head>
<body>

<h2>{{ user_profile["name"] }}</h2>
<h3>ユーザID:{{ user_profile["sub"][:5] }}...</h3>
<img style="border-radius:50%;width:200px;height: 200px" src="{{ user_profile['picture'] }}"/>

</body>
</html>



おまけ

最後までお付き合いいただき、ありがとうございました。

少しでもお役に立てたのであれば、嬉しいです。

以前に実装したMessaging APIの内容も含めたLINE Botの例です。ぜひ、使って遊んでみてください。



計画・企画を多様な人から意見を聞けるサービス「Renttle」を開発中です。ぜひ、使ってみて、レビューをください。