LoginSignup
4
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

@koseki_yamaki

PaizaCloud+Laravel5.7.9でtwitter連携ログインをしよう

Last updated at Posted at 2018-10-23

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のメニューから新規サーバ作成を選択すると以下の画面が表示される。
スクリーンショット 2018-10-23 5.31.52.png

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
にアクセスすれば動作している。

スクリーンショット 2018-10-23 23.10.46.png
  • twitterでログインをクリック。
スクリーンショット 2018-10-23 23.11.47.png
  • twitterにログインする。（していれば自動的に画面遷移）
スクリーンショット 2018-10-23 23.08.08.png 以上で終了です。お疲れ様でした。 全工程を書いたつもりですが、不備がありましたら教えてください。

参考

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

4
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
4
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?