LINE Loginを自分のPHPサイトに導入する

f:id:cybertribe:20201029172632p:plain[:contents]

LINE Developersにログイン

LINEのアカウントを使って以下のサイトからLINE Developersにログインすることができます。LINE DevelopersはLINEが提供する開発プラットフォームでLINE botなどを作ることができます。
developers.line.biz

ログイン後の画面
ログイン後の画面

Providerを作成する

ProviderとはLINEのアプリケーションを提供するアカウントのようなものです。まずはこのProviderを作成します。
Createボタンを押しましょう。

作成ボタン
Createボタン

このようなダイアログが開かれるので、Provider名を設定してください。ここではsampleとします。

プロバイダー名の入力
Provider名の入力

作成すると、このような画面に移ります。これでProviderの作成は完了です。

プロバイダー作成後の画面
Provider作成後の画面

channelを作成する

channelとはProviderが提供するアプリケーションのことです。これを作成して公開します。
今回はLINE Loginを作成したいので左上のCreate a LINE Login channelを選択します。

ラインログイン
LINE Login

画面に従って設定をおこなってください。ここでは以下のように設定しました。

チャンネルの設定
Channelの設定

Developing(非公開)が初期状態になっているので、Published(公開)に変更します。

変更前
変更前
公開に変更
Publishedに変更
変更後
変更後

あとで使用するので、Channel IDChannel secretをメモしておきましょう。

チャンネルアイディー
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>

認証機能を作成する

認証機能を完成させるには以下の手順が必要です。

  1. ログインボタンからLINEにアクセスして認可コードを受け取る
  2. 認可コードを使ってLINEにアクセスしてアクセストークンを受け取る
  3. アクセストークンを使ってLINEにアクセスしてユーザー情報を受け取る

ここではこれらの処理をPHPcurlを使って実装します。

ログインボタンから認可コードを受け取る

LINE LoginタブにあるCallback URLに認証前のページを登録します。
f:id:cybertribe:20201029163953p:plain
f:id:cybertribe:20201029173111p:plain
次に認証前ページにあるログインボタンの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"]){
        // 認証の処理
    }
?>

次にcurlを使ってリクエストを作成します。

$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を導入する方法

ハッカソンなどで毎回方法を忘れるので備忘録

  1. Node.jsをインストールする
  2. nodejs.org
    Node.jsのバージョンを確認

    C:\Users\You>node -v
    v12.18.0
    

    npmのバージョンを確認

    C:\Users\You>npm -v
    6.14.5
    
  3. yarnをインストールする
  4. classic.yarnpkg.com
    yarnのバージョンを確認

    C:\Users\You>yarn -v
    1.22.5
    
  5. Nuxtプロジェクトを作成する
  6. 作業フォルダに移動

    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のロゴが表示されれば完成