Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした