今回はLaravel8でLINEログインを実装する方法について解説をします。
SNSアカウントでログインをするケースとしては
GoogleアカウントやTwitterなどがありますよね!
LINEに関しては登録していない人はほぼいないと思うのでこの機会に
LINEでログイン機能を一緒に実装して行きましょう!
LINE側の設定
URLは以下からアクセスすることができます。
ログインボタンを押して、「LINEアカウントでログイン」または「ビジネスアカウントでログイン」の
ボタンがあると思います。どちらでもいいと思いますが今回は「LINEアカウントでログイン」で開始します。
メールアドレス、パスワードを入力すると自身のLINEに本人認証のコードが入るので
コンソール画面に移動しましょう!
次にプロダクト→LINEログインを選択
入力する内容は以下となります。
-
プロバイダー:新規プロバイダー作成
-
プロバイダー名:お好きなもの
-
地域: 日本
-
会社・事業者の所在国・地域:日本
-
チャンネルアイコン:お好きなもの
-
チャンネル名:お好きなもの
-
チャンネル説明:お好きなもの
-
アプリタイプ:ウェブアプリ
-
メールアドレス : ご自身のメールアドレス
プライバシーボリシーURL、サービス利用規約URLは一旦はスキップしてもらって大丈夫です。
必須項目を入力して作成をクリックしましょう。
作成後にチャネルIDとチャンネルシークレットが表示されているのでメモをしておきましょう!
LINEコールバック設定
LINEログイン設定のコールバックを指定する必要があります。
開発環境においてもlocalhostのURLだと動作ができないため
テストする場合はngrokなどを使いテストをしましょう。
なおこの段階では私は以下のURLにしました。
[https://sample/callback]
sampleにngrokで取得したURLが入ります。
laravel LINE連携の環境変数設定
新規でプロジェクトを作成する手順は割愛します。
構成はlaravel/uiを導入したところまでです。
LINEログインに必要なライブラリをインストールします。
ターミナル
composer create-project --prefer-dist laravel/laravel linelogin
次に.envファイルにLINE側で設定した項目を記載します。
.env
LINE_CHANNEL_ID=チャンネルID
LINE_CHANNEL_SECRET=チャンネルシークレット
LINE_REDIRECT=https://{ドメイン}/callback
config/services.phpにもこの設定を反映させます。
config/services.php
'line' => [
'client_id'=>env('LINE_CHANNEL_ID'),
'client_secret' =>env('LINE_CHANNEL_SECRET'),
'redirect'=>env('LINE_REDIRECT'),
],
usersテーブルにLINE連携用のカラムの追加
デフォルトのusersテーブルをカスタマイズします。
create_users_table.php
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
作成したファイルに以下を追記します。
LineLoginController.php
<?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ルート追加
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などを見直してみましょう!
youtubeでLaravelでSNS風アプリの動画もあるので
Laravelでアプリを作ってみたい人はぜひみてみてください!