Laravel Socialiteを使ってQiitaアカウントでログイン

[Crieit - プログラマー、クリエイターが何でも気軽に書けるコミュニティ](https://crieit.net) というQiitaのようなサービスを運用しています。今回Qiitaアカウントで自分のサービスにログインできるようにしてみました。やり方とかを書いておきます。

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/136506/0badb1b3-48a4-96c7-46e8-cc9207e2dc83.png)

## Laravel Socialite

CrieitというサービスはLaravelで作られています。LaravelにはLaravel Socialiteという外部サービスのOAuth認証を使って簡単にログイン機能を実装することが出来るパッケージがあります。今回それを利用しました。

Socialiteには、また別に様々なプロバイダ用の追加パッケージが用意されています。それらと連携させることで色々なサービスのアカウントでログインするための機能を簡単に作ることが出来るようになっています。

[Socialite Providers](https://socialiteproviders.netlify.com/about.html)

Qiita用のパッケージはここにはないのですが、基本的に誰でも作れるようになっています。そのためそのようにして日本の方が作成されたパッケージを利用してログイン機能を実装しました。

## 利用したもの

今回利用したものは @kawax さんが作成された下記です。

[kawax/socialite-qiita](https://github.com/kawax/socialite-qiita)

kawaxさんは元々 [Laravel Socialite 独自ドライバの作り方](https://qiita.com/kawax/items/4b127a86732455ae4e32) とう記事も書かれていたようです。

ちなみに @mikkame さんも同様のものを開発されているようです。記事もあります。

[Laravel Socialite でQiitaログインできるやつ作りました](https://qiita.com/mikkame/items/c7622a3b9798f62840b1)

以前せっかくmikkameさんに教えていただいたのに誰か忘れてしまっていてkawaxさんの作られた方を使っていました……。

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/136506/1ee1149f-6c15-ab07-f351-35453f7e5c85.png)

詳しく見ていませんが恐らくSocialiteの作法に従う感じだと思うのでそんなに大きくは違わないのではないかと思います（微妙に対応している機能は違ったりするかもしれませんが）。

## 実際の対応方法

実際の対応方法も書いておきます。

### Qiitaにアプリケーション登録

Qiitaと連携させるためにはまずQiitaに連携用のアプリケーションを登録する必要があります。Qiitaの設定画面を開き、「アプリケーション」メニューがありますのでそちらを開くと「登録中のアプリケーション」という項目があります。

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/136506/8644e3f1-1fb0-a563-7ae3-f60bde5b9bb6.png)

そちらで「アプリケーションを登録する」を選択します。登録画面が開きますので適宜入力して登録します。

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/136506/62ad1376-7eea-bdf2-b720-2886bc9407b8.png)

登録するとアプリケーション一覧に表示されますが、そこがリンクになっていてクリックできるようになっています。クリックすると編集画面が開きますが、一緒に連携で使用するためのClient IDとClient Secretも下記の画像のように表示されています（隠しているだけですので本当にぼやけているわけではありません）。

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/136506/25d08b43-557c-e90e-e8f5-1b4ddb931f9a.png)

Client IDとClient SecretはLaravel側で設定しますので、一字一句間違わないようしっかり覚えておいてください。一応コピーも可能です。

### Composerでインストール

続いてLaravel側に設定していいます。まずはComposerでインストールを行います。

```sh
composer require revolution/socialite-qiita
```

`config/services.php`にQiita用の設定を追記します。

```php
    'qiita' => [
        'client_id'     => env('QIITA_CLIENT_ID'),
        'client_secret' => env('QIITA_CLIENT_SECRET'),
        'redirect'      => env('QIITA_REDIRECT'),
    ],
```

上記は環境変数から値を取得しているため`.env`にも設定します。

```
QIITA_CLIENT_ID=さきほどのClient ID
QIITA_CLIENT_SECRET=さきほどのClient Secret
QIITA_REDIRECT=Qiitaアプリケーションに設定したリダイレクト先のURL
```

これで設定自体は完了です。

### ログインの流れを作成

あとは実際にログインするための動作を作っていくだけです。基本的な流れはまず必要なパラメータを付けてQiitaにアクセスするとQiitaの認証画面が開くので、承認すれば諸々のパラメータと一緒にサービス側に戻ってくるのでそのパラメータを利用してQiitaから情報を取得する、という流れになります。

ということでまずは

> 必要なパラメータを付けてQiitaにアクセス

ですが、これはSocialiteがやってくれるのでコントローラのアクションで処理を呼んでリダイレクトするだけです。

```php
    public function redirectToProvider(Request $request)
    {
        return Socialite::driver('qiita')->redirect();
    }
```

なんだかんだが行われたあとはアプリケーション側に戻ってきますので、あとは下記のようにして情報を取得するだけです。

```php
    public function handleProviderCallback(Request $request)
    {
        $providerUser = Socialite::driver('qiita')->user();
```

このユーザー情報を使ってあれこれDBに保存したりログインしたりすれば完了です。`$providerUser`は具体的は下記のような値が入っています。

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/136506/959618b7-b12e-6f8d-0291-5cbf4d78b7a1.png)

userの配列は`$providerUser->user['location']`のようにして取れます。それ以外は`$providerUser->getName()`のようにして取れます。詳しくはSocialiteのドキュメントを参照してください。

[Laravel Socialite - Laravel - The PHP Framework For Web Artisans](https://laravel.com/docs/6.x/socialite)

## まとめ

以上のようにLaravel Socialiteでとても簡単にQiitaログインが可能になります。プロバイダ用のパッケージを作ってくださった方に感謝です。

もし参考になる部分があったら是非「いいね」をお願いします！

下記サービスで実際に試せます。

[Crieit - プログラマー、クリエイターが何でも気軽に書けるコミュニティ](https://crieit.net)