PaizaCloudを使ってtwitter連携をしたい

PaizaCloudでどこでも開発できる。そしてどこでも続きの作業に入れる。
そして環境構築は一瞬で終わる。~~俺みたいな~~初心者にとくにおすすめ。

本記事の対象者

Laravelを触ったこともロクに無い素人。
でもtwitter連携ログインを実装したい。

以下の内容を全て終わらせた人。
Laravel入門 - はじめてのLaravelチュートリアル
https://proxy-paiza-hatenablog-com.paiza.cloud/entry/2018/02/16/paizacloud_laravel#main

目標

twitter連携でログイン出来るWebサービスの公開
他のSNSにも対応できるが、この記事ではtwitter以外には言及しない。

準備

PaizaCloudのアカウント
https://paiza.cloud/ja/
Application Managementでアプリの登録をする
https://developer.twitter.com/en/apps
twitter側で必要な設定
WebsiteURL https://サーバ名.paiza-user.cloud/
CallbackURL https://サーバ名.paiza-user.cloud/login/twitter/callback

新規サーバの作成

PaizaCloudのメニューから新規サーバ作成を選択すると以下の画面が表示される。

Laravel、phpMyAdmin、Apacheを選択して新規サーバ作成。

Laravelアプリケーションの作成

ターミナルを開き以下のように入力する。

~$ laravel new myapp

データベースの作成

myappフォルダ下でmysqlを開いてデータベースの作成をする。

~$ cd myapp
~/myapp$ mysql -u root
>mysql create database mydb;

データベースの接続の設定

下記のように変更する。

/.env

DB_DATABASE=mydb
DB_USERNAME=root
# DB_PASSWORD=secret

httpとhttpsの混在を解消する

以下の内容を追記する。（一番下でよい）
PaizaCloudはhttpsで公開するので必要。

routes/web.php

URL::forceScheme('https');

authの準備

Laravel標準のauthを用意する

~/myapp$ php artisan make:auth

Socialiteのインストール

~/myapp$ composer require laravel/socialite

これめっちゃ時間かかる。

ログイン処理の実装

ログイン画面にtwitterログインを追加する

12行目の@csrfの下に以下を追記する。

resources/views/auth/login.blade.php

<a href="{{ url('login/twitter')}}">twitterでログイン</a>

なお、通常ログイン部分は不要なので削除してもよい。

usersテーブルを改修する

make:auth時にusersが自動作成されるので、これをtwitter用に改修する。
既存のpublic function up()を以下の内容に変更する。

database/migrations/xxxx_create_users_table.php

    public function up()
    {
        Schema::create('users', function (Blueprint $table) {
            $table->increments('id');
            $table->string('twitterid')->unique;
            $table->string('nickname');
            $table->string('name');
            $table->rememberToken();
            $table->timestamps();
        });
    }

コンソールから以下の内容を実行する。

~/myapp$ php artisan migrate:refresh

ルーティングの設定

一番下に追記する。

routes/web.php

//ログインボタンからのリンク
Route::get('/login/{social}', 'Auth\LoginController@socialLogin')->where('social', 'facebook|twitter');
//コールバック用
Route::get('/login/{social}/callback', 'Auth\LoginController@handleProviderCallback')->where('social', 'facebook|twitter');

LoginControllerの実装

下記の内容を該当ファイルに上書きコピペする。

app/Http/Controllers/Auth/LoginController.php

<?php

namespace App\Http\Controllers\Auth;

use App\Http\Controllers\Controller;
use Illuminate\Foundation\Auth\AuthenticatesUsers;

use Socialite;
use App\User;
use Auth;

class LoginController extends Controller
{
    use AuthenticatesUsers;

    protected $redirectTo = '/home';

    public function __construct()
    {
        $this->middleware('guest')->except('logout');
    }

    //ログインクリックからのリンク
    public function socialLogin($social)
    {
        return Socialite::driver($social)->redirect();
    }

    //Callback処理
    public function handleProviderCallback($social)
    {
        //ユーザのソーシャル情報を取得
        $userSocial = Socialite::driver($social)->user();
        //twitteridで検索
        $user = User::where(['twitterid' => $userSocial->getId()])->first();
        
        if($user){
            //2回目以降のログイン
            Auth::login($user);
            return redirect('/home');
        }else{
            //初回ログイン
            $newuser = new User;
            $newuser->name = $userSocial->getName();
            $newuser->twitterid = $userSocial->getId();
            $newuser->nickname = $userSocial->getNickName();
            $newuser->save();
            Auth::login($newuser);
            return redirect('/home');
        }
    }
}

twitterのクライアントIDを設定する

以下の内容を追記する。

config/service.php


   'twitter' => [
      'client_id' => env('TWITTER_CLIENT_ID'),
      'client_secret' => env('TWITTER_CLIENT_SECRET'),
      'redirect' => env('TWITTER_CALLBACK_URL'),
    ],

/.env


TWITTER_CLIENT_ID=twitterクライアントID
TWITTER_CLIENT_SECRET=twitterクライアントシークレット
TWITTER_CALLBACK_URL=https://サーバ名.paiza-user.cloud/login/twitter/callback

サーバの起動

apacheがデフォルトで起動している為、停止させる。

~/myapp$ sudo service apache2 stop; sudo systemctl disable apache2

外部からアクセス出来るようにして起動する。

~/myapp$ sudo php artisan serve --host=0.0.0.0 --port=80

動作確認

https://自分のサーバ名.paiza-user.cloud/login
にアクセスすれば動作している。

twitterでログインをクリック。

twitterにログインする。（していれば自動的に画面遷移）

以上で終了です。お疲れ様でした。全工程を書いたつもりですが、不備がありましたら教えてください。

参考

Laravel入門 - はじめてのLaravelチュートリアル　前提
https://paiza.hatenablog.com/entry/2018/02/16/paizacloud_laravel
（PaizaCloudでLaravel開発を始める人は必見、穴が開くまで読む）

Laravel 5.7 Laravel Socialite　必読
https://readouble.com/laravel/5.7/ja/socialite.html

Laravel5.7でソーシャルログイン（Socialite利用）　多数参照。ありがとうございます
https://qiita.com/zaburo/items/26e94bce0068f479a8e8

Laravel SocialiteのgetEmailでTwitterのメールアドレスが取得できなかったので調べてみた
https://tech.innovator.jp.net/entry/2017/08/08/120555

新しくなった Twitter Developer ポータルに登録してみる
https://qiita.com/tdkn/items/521686c240b0c5bc6207