Laravel LINEログイン機能

PHP

今回解説する内容としてはLaravelとLineログイン機能となります。

Laravelのバージョンは8となります。

LINEの設定

URLは以下からアクセスすることができます。

https://developers.line.biz/ja/

ログインボタンを押下して、「LINEアカウントでログイン」または「ビジネスアカウントでログイン」の

ボタンがあると思います。どちらでもいいと思いますが今回は「LINEアカウントでログイン」で開始します。

メールアドレス、パスワードを入力すると自身のLINEに本人認証のコードが入るのでコンソール画面に

移動しましょう!

プロダクト->LINEログインを選択

  • プロバイダー:新規プロバイダー作成
  • プロバイダー名:お好きなもの
  • 地域: 日本
  • 会社・事業者の所在国・地域:日本
  • チャンネルアイコン:お好きなもの
  • チャンネル名:お好きなもの
  • チャンネル説明:お好きなもの
  • アプリタイプ:ウェブアプリ
  • メールアドレス

プライバシーボリシーURL、サービス利用規約URLは一旦はスキップしてもらって大丈夫です。

必須項目を入力して作成をクリックしましょう。

作成後にチャネルIDとチャンネルシークレットが表示されているのでメモをしておきましょう!

コールバック設定

LINEログイン設定のコールバックを指定する必要があります。

開発環境においてもlocalhostのURLだと動作ができないため

テストする場合はngrokなどを使いテストをしましょう。

なおこの段階では私は以下のURLにしました。

[https://sample/callback]

sampleにngrokで取得したURLが入ります。

Laravel側の設定

新規でプロジェクトを作成する手順は割愛します。

構成はlaravel/uiを導入したところまでです。

LINEログインに必要なライブラリをインストールします。

composer create-project --prefer-dist laravel/laravel linelogin

次に.envファイルにLINE側で設定した項目を記載します

LINE_CHANNEL_ID=チャンネルID
LINE_CHANNEL_SECRET=チャンネルシークレット
LINE_REDIRECT=https://{ドメイン}/callback

config/services.phpにもこの設定を反映させます。

 'line' => [
        'client_id'=>env('LINE_CHANNEL_ID'),
        'client_secret' =>env('LINE_CHANNEL_SECRET'),
        'redirect'=>env('LINE_REDIRECT'),
    ],

usersテーブルにカラムの追加

デフォルトのusersテーブルをカスタマイズします。

public function up()
    {
        Schema::create('users', function (Blueprint $table) {
            $table->id();
            $table->string('name');
            $table->string('email')->unique()->nullable();
            $table->timestamp('email_verified_at')->nullable();
            $table->string('password')->nullable();
            $table->string('provider')->nullable(); //追記
            $table->string('line_id')->nullable();  //追記
            $table->rememberToken();
            $table->timestamps();
        });
    }

migrateも忘れずに。

php artisan migrate:refresh

コントローラの作成

php artisan make:controller LineLoginController

作成したファイルに以下を追記します。

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Illuminate\Support\Str;
use App\Models\User;
use Illuminate\Support\Facades\Auth;

class LineLoginController extends Controller
{
  // Lineログイン画面を表示
    public function lineLogin()
    {
        $state = Str::random(32);
        $nonce  = Str::random(32);
      
        $uri ="https://access.line.me/oauth2/v2.1/authorize?";
        $response_type = "response_type=code";
        $client_id = "&client_id=".config('services.line.client_id');
        $redirect_uri ="&redirect_uri=".config('services.line.redirect');
        $state_uri = "&state=".$state;
        $scope = "&scope=openid%20profile";
        $prompt = "&prompt=consent";
        $nonce_uri = "&nonce=";
  
        $uri = $uri . $response_type . $client_id . $redirect_uri . $state_uri . $scope . $prompt . $nonce_uri;

        return redirect($uri);
    }

    // アクセストークン取得
    public function getAccessToken($req)
    {
  
      $headers = [ 'Content-Type: application/x-www-form-urlencoded' ];
      $post_data = array(
        'grant_type'    => 'authorization_code',
        'code'          => $req['code'],
        'redirect_uri'  => config('services.line.redirect'),
        'client_id'     =>  config('services.line.client_id'),
        'client_secret' => config('services.line.client_secret'),
      );
      $url = 'https://api.line.me/oauth2/v2.1/token';
  
      $curl = curl_init();
      curl_setopt($curl, CURLOPT_URL, $url);
      curl_setopt($curl, CURLOPT_CUSTOMREQUEST, 'POST');
      curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, false);
      curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
      curl_setopt($curl, CURLOPT_HTTPHEADER, $headers);
      curl_setopt($curl, CURLOPT_POSTFIELDS, http_build_query($post_data));
  
      $res = curl_exec($curl);
      curl_close($curl); 
      $json = json_decode($res);
      $accessToken = $json->access_token;

      return $accessToken;
    }

    // プロフィール取得
    public function getProfile($at)
    {
  
      $curl = curl_init();
      curl_setopt($curl, CURLOPT_HTTPHEADER, array('Authorization: Bearer ' . $at));
      curl_setopt($curl, CURLOPT_URL, 'https://api.line.me/v2/profile');
      curl_setopt($curl, CURLOPT_CUSTOMREQUEST, 'GET');
      curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
  
      $res = curl_exec($curl);
      curl_close($curl);
  
      $json = json_decode($res);
  
      return $json;
  
    }

    // ログイン後のページ表示
    public function callback(Request $request)
    {
      $accessToken = $this->getAccessToken($request);
      $profile = $this->getProfile($accessToken);

      // ユーザー情報あるか確認
      $user=User::where('line_id', $profile->userId)->first();

      // あったらログイン
      if($user) {
        Auth::login($user);
        return redirect('/home');

      // なければ登録してからログイン
      }else {
        $user=new User();
        $user->provider='line';
        $user->line_id=$profile->userId;
        $user->name=$profile->displayName;
        $user->save();
        Auth::login($user);
        return redirect('/home');
      }
    }
}

Web.phpのルート追加

Route::get('/linelogin', [App\Http\Controllers\LineLoginController::class, 'lineLogin'])->name('linelogin');
Route::get('/callback',  [App\Http\Controllers\LineLoginController::class,'callback'])->name('callback');

ログインリンクの設置

どこでもいいですが今回は

resources/views/auth/register.phpの設置しました。

<a href="{{route('linelogin')}}">LINEログイン</a>

その後LINEログインボタンがあると思いますのでクリックして

LINEアカウントが表示されれば完了です。

Badrequestなどと表示される場合はコールバックURLなどを見直してみましょう!