LINE Loginを自分のPHPサイトに導入する
[:contents]
LINE Developersにログイン
LINEのアカウントを使って以下のサイトからLINE Developersにログインすることができます。LINE DevelopersはLINEが提供する開発プラットフォームでLINE botなどを作ることができます。
developers.line.biz
Providerを作成する
ProviderとはLINEのアプリケーションを提供するアカウントのようなものです。まずはこのProviderを作成します。
Createボタンを押しましょう。
このようなダイアログが開かれるので、Provider名を設定してください。ここではsampleとします。
作成すると、このような画面に移ります。これでProviderの作成は完了です。
channelを作成する
channelとはProviderが提供するアプリケーションのことです。これを作成して公開します。
今回はLINE Loginを作成したいので左上のCreate a LINE Login channelを選択します。
画面に従って設定をおこなってください。ここでは以下のように設定しました。
Developing(非公開)が初期状態になっているので、Published(公開)に変更します。
あとで使用するので、Channel IDとChannel secretをメモしておきましょう。
WEBページを作成する
LINE Loginにはログインボタンを設置するページとログイン後に開かれるページの2つが必要です。それぞれ認証前ページと認証後ページとよぶことにします。
LINE LoginのログインボタンにはLINEが公式に配布している画像を使います。
developers.line.biz
認証前ページ before.php
<body> <a href=""><img src="btn_login_base.png"/></a> </body>
認証後ページ after.php
<body> <a href=""><img src="btn_login_base.png"/></a> </body>
認証機能を作成する
認証機能を完成させるには以下の手順が必要です。
ログインボタンから認可コードを受け取る
LINE LoginタブにあるCallback URLに認証前のページを登録します。
次に認証前ページにあるログインボタンのhrefを設定します。
<body> <a href="https://access.line.me/oauth2/v2.1/authorize?response_type=code&client_id={メモしていたChannel ID}&redirect_uri={before.phpのURL}&state=12345abcd&scope=profile"> <img src="btn_login_base.png"/> </a> </body>
このボタンをクリックしてログインをすると認可コードが返されます。
認可コードを使ってアクセストークンを受け取る
認可コードは$_GET["code"]に保存されているので、その中身が空でないことを検証します。
<?php if($_GET["code"]){ // 認証の処理 } ?>
$postData = array( 'grant_type' => 'authorization_code', 'code' => $_GET['code'], 'redirect_uri' => '{認証前ページのURL}', 'client_id' => '{メモしていたChannel ID}', 'client_secret' => '{メモしていたChannel secret}' ); $ch = curl_init(); curl_setopt($ch, CURLOPT_HTTPHEADER, array('Content-Type: application/x-www-form-urlencoded')); curl_setopt($ch, CURLOPT_URL, 'https://api.line.me/oauth2/v2.1/token'); curl_setopt($ch, CURLOPT_CUSTOMREQUEST, 'POST'); curl_setopt($ch, CURLOPT_POSTFIELDS, http_build_query($postData)); curl_setopt($ch, CURLOPT_RETURNTRANSFER, true); $response = curl_exec($ch); // この中にアクセストークンが保存されている。 curl_close($ch);
これでアクセストークンの取得が完了です。
アクセストークンを使ってユーザー情報を受け取る
アクセストークンは$responseに保存されているので、それを使ってリクエストを作成します。
$json = json_decode($response); // レスポンスはjsonで返されている $accessToken = $json->access_token; // アクセストークンを取り出す $ch = curl_init(); curl_setopt($ch, CURLOPT_HTTPHEADER, array('Authorization: Bearer ' . $accessToken)); curl_setopt($ch, CURLOPT_URL, 'https://api.line.me/v2/profile'); curl_setopt($ch, CURLOPT_CUSTOMREQUEST, 'GET'); curl_setopt($ch, CURLOPT_RETURNTRANSFER, true); $response = curl_exec($ch); // ユーザー情報が保存されている curl_close($ch);
これでユーザー情報の取得が完了です。
ユーザー情報を活用する
取得したユーザー情報を例えばSESSION情報に入れてから認証後のページに遷移することで、認証後のページにおいてユーザー情報を活用することができます。
ユーザー情報をSESSIONに保存する
ユーザー情報を$_SESSIONに保存します。
$json = json_decode($response); // レスポンスはjsonで返されている session_start(); $_SESSION["userId"] = $json->userId; // ユーザーのユニークID $_SESSION["displayName"] = $json->displayName; // ユーザーが設定しているLINE上の名前 $_SESSION["pictureUrl"] = $json->pictureUrl; // ユーザーが設定しているアイコン header("Location: ./after.php"); // 認証後ページへ遷移する exit ;
ユーザー情報を使ったサンプル
$_SESSIONに保存された情報を取り出して簡単なサンプルを作成します。
after.php
<body> <?php session_start(); ?> <h1><?php echo $_SESSION['displayName'];?></h1> <img src="<?php echo $_SESSION['pictureUrl'];?>"> </body>
実行した結果どのようになるのか是非試してみてください。
まとめ
PHPのサイトにLINE Loginを組み込む方法を示しました。
その他詳しくはこちらを参照してください。
developers.line.biz
xp-cloud.jp
before.php
<body> <a href="https://access.line.me/oauth2/v2.1/authorize?response_type=code&client_id={メモしていたChannel ID}&redirect_uri={before.phpのURL}&state=12345abcd&scope=profile"> <img src="btn_login_base.png"/> </a> <?php if(isset($_GET['code'])){ $postData = array( 'grant_type' => 'authorization_code', 'code' => $_GET['code'], 'redirect_uri' => '{認証前ページのURL}', 'client_id' => '{メモしていたChannel ID}', 'client_secret' => '{メモしていたChannel secret}' ); $ch = curl_init(); curl_setopt($ch, CURLOPT_HTTPHEADER, array('Content-Type: application/x-www-form-urlencoded')); curl_setopt($ch, CURLOPT_URL, 'https://api.line.me/oauth2/v2.1/token'); curl_setopt($ch, CURLOPT_CUSTOMREQUEST, 'POST'); curl_setopt($ch, CURLOPT_POSTFIELDS, http_build_query($postData)); curl_setopt($ch, CURLOPT_RETURNTRANSFER, true); $response = curl_exec($ch); // この中にアクセストークンが保存されている。 curl_close($ch); $json = json_decode($response); // レスポンスはjsonで返されている $accessToken = $json->access_token; // アクセストークンを取り出す $ch = curl_init(); curl_setopt($ch, CURLOPT_HTTPHEADER, array('Authorization: Bearer ' . $accessToken)); curl_setopt($ch, CURLOPT_URL, 'https://api.line.me/v2/profile'); curl_setopt($ch, CURLOPT_CUSTOMREQUEST, 'GET'); curl_setopt($ch, CURLOPT_RETURNTRANSFER, true); $response = curl_exec($ch); // ユーザー情報が保存されている curl_close($ch); $json = json_decode($response); // レスポンスはjsonで返されている session_start(); $_SESSION["userId"] = $json->userId; // ユーザーのユニークID $_SESSION["displayName"] = $json->displayName; // ユーザーが設定しているLINE上の名前 $_SESSION["pictureUrl"] = $json->pictureUrl; // ユーザーが設定しているアイコン header("Location: ./after.php"); // 認証後ページへ遷移する exit ; } ?> </body>
after.php
<body> <?php session_start(); ?> <h1><?php echo $_SESSION['displayName'];?></h1> <img src="<?php echo $_SESSION['pictureUrl'];?>"> </body>
Nuxt.jsの導入(Windows10)
WindowsにNuxt.jsを導入する方法
ハッカソンなどで毎回方法を忘れるので備忘録
- Node.jsをインストールする
- Nuxtプロジェクトを作成する
nodejs.org
Node.jsのバージョンを確認
C:\Users\You>node -v v12.18.0
npmのバージョンを確認
C:\Users\You>npm -v 6.14.5
作業フォルダに移動
C:\Users\You>cd workspace C:\Users\You\workspace>
Nuxtプロジェクトを作成
C:\Users\You\workspace>yarn create nuxt-app sample-project
いくつかの質問(名前、Nuxt オプション、UI フレームワーク、TypeScript、linter、テストフレームワークなど)に答えると選択した全ての依存関係がインストールされます.
Nuxtプロジェクトに移動する
C:\Users\You\workspace>cd sample-project C:\Users\You\workspace\sample-project>
各モジュールをインストールする
C:\Users\You\workspace\sample-project>yarn
Nuxt.jsを起動する
C:\Users\You\workspace\sample-project>yarn dev
http://localhost:3000/を開いてNuxt.jsのロゴが表示されれば完成