以前の記事ではWebアプリにLINEのログイン機能をつける方法をお伝えしました。
WebアプリにLINEログイン機能を組み込む xp-cloud.jp
今回はログインした後に、プロフィール情報を取得する方法をお伝えします。
ログイン部分は以前の物を使いまわしますので省略させてもらいます。
全体的な流れ
プロフィール取得方法
LINEが提供しているRestAPIを使用します。
重要なポイントはリクエストヘッダーに認証トークンを指定する点です。
前回使用したLambdaの認証後のページ(index.js)を次のように変更します。
var request = require('request'); exports.handler = async(event) => { var token = await postRequest( 'https://api.line.me/oauth2/v2.1/token', { 'grant_type': 'authorization_code', 'code': event.queryStringParameters.code, 'redirect_uri': '<API GatewayのURL>', 'client_id': '<Channel ID>', 'client_secret': '<Channel Secret>' } ); var tokenBody = JSON.parse(token.httpResponse.body); var profile = await getRequest( 'https://api.line.me/v2/profile', { 'auth': { 'bearer': tokenBody.access_token } } ); var profileBody = JSON.parse(profile.httpResponse.body); const response = { statusCode: 200, headers: {'content-type': 'text/html; charset=utf-8'}, body: `<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>Login</title> </head> <body> <h3>userId</h3> <p>${profileBody.userId}</p> <h3>displayName</h3> <p>${profileBody.displayName}</p> <h3>pictureUrl</h3> <img src="${profileBody.pictureUrl}" style="width:100px"/> <p>${profileBody.pictureUrl}</p> </body> </html> ` }; return response; }; var postRequest = (url, form) => { return new Promise((resolve) => { request.post( {url: url, form: form}, (err, httpResponse, body) => { resolve({ err: err, httpResponse: httpResponse, body: body }); } ); }); }; var getRequest = (url, header) => { return new Promise((resolve) => { request.get( url, header, (err, httpResponse, body) => { resolve({ err: err, httpResponse: httpResponse, body: body }); } ); }); };
ポイントはここです
var profile = await getRequest( 'https://api.line.me/v2/profile', { 'auth': { 'bearer': tokenBody.access_token } } );
ユーザープロフィールを取得するAPI(https://api.line.me/v2/profile)へリクエストを飛ばす時に ログインで取得したトークンを一緒に渡しています。 "get"リクエストで取得するため"body"要素は使えず、 かといってURLパラメーターにトークンを載せるのもセキュリティ上好ましくありません。
LINEのAPIはリクエストヘッダーにトークンを含めるよう推奨していますので必然的にこの形式でリクエストを投げることになります。
動作確認
ログインする所から動かしてみましょう。
LINEに登録している名前等が確認できました(マスクしてますが)
この"userId"はLINEアカウントで一意な物なので、LINEアカウントを自分のアプリに組み込む時に重宝すると思います。