スマートフォンやhtml5+CSS3など新技術に四苦八苦。jQuery、AjaxなどJavaScriptも難しいですね。そんなWebに悩む人のネタ帳です。

LaravelでPassportパッケージ(OAuth)を使用したAPI認証を構築

update : 2019/04/14

Laravelを使った認証方法をいくつかあるようですが、Passportパッケージを使ったAPI認証の構築にチャレンジしてみます。

今回は、Facebook APIやTwitter APIのようなAPIを介してサービスを提供する側の認証や、vue.jsなどWebアプリを構築する際にサーバサイドへのアクセスに認証を設けるケースを想定します。

ちなみに、構築した環境は以下の通りです。

  • Windows 10 Home
  • PHP 7.1.26
  • Laravel 5.8.7

Passportパッケージをインストールと設定

Composerを使ってPassportパッケージをインストールします。

> composer require laravel/passport

次に、migrateを実行して、認証情報を保持するテーブルを作成します。

> php artisan migrate

ここで、いくつかユーザ(例えばsample@helog.jpなど)を追加しますが、その方法は割愛いたします。

次に、passport:clientコマンドを実行して、アクセストークンを取得するためにのIDとクライアントシークレットキーを取得します。
今回はユーザ名とパスワードを必要とする認証にするので、オプションに「–password」を指定します。ここで生成されたクライアントIDとクライアントシークレットキーはメモしておきます。

> php artisan passport:client --password

 What should we name the password grant client? [Laravel Password Grant Client]:
 >

Password grant client created successfully.
Client ID: 1
Client secret: xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

「app/User.php」を開き、「use Laravel\Passport\HasApiTokens;」と「use Notifiable;」の部分に「HasApiTokens」を追記します。

...
use Laravel\Passport\HasApiTokens;
use Illuminate\Notifications\Notifiable;
use Illuminate\Contracts\Auth\MustVerifyEmail;
use Illuminate\Foundation\Auth\User as Authenticatable;

class User extends Authenticatable
{
    use HasApiTokens, Notifiable;
...

「app/Providers/AuthServiceProvider.php」を開き、「use Laravel\Passport\Passport;」と「Passport::routes();」を追記します。

...
use Laravel\Passport\Passport;
use Illuminate\Support\ServiceProvider;
use Illuminate\Support\Facades\Schema;

class AppServiceProvider extends ServiceProvider
{
...
    public function boot()
    {
        Schema::defaultStringLength();

        Passport::routes();
    }
}

「config/auth.php」を開き、guards⇒api⇒driverの値をpassportにします。

...
    'guards' => [
        'api' => [
            'driver' => 'passport',
            'provider' => 'users',
        ],
...

これで一通り準備は完了です。

APIに認証をかける

それでは、実際にAPIに認証をかけてみます。
例えばユーザ情報を取得するAPI「http://helog.jp/api/user」へのアクセスに認証をかけます。

「routes/api.php」を開き、対象のAPIに「->middleware(‘auth:api’)」を付加します。

Route::get('user', 'UserController@index')->middleware('auth:api');

認証方法

では、実際に上記の認証が必要なAPIに対して、今回はjQueryをベースとしたJavaScriptでアクセスしてみます。

var $jsondata = {
	grant_type: "password",
	client_id: "1",
	client_secret: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
	username: "sample@helog.jp",
	password: "xxxxxxxx",
	scope: "*"
};

$.ajax({
	url: '/oauth/token',
	type: 'POST',
	contentType: 'application/json',
	dataType: "json",
	data: JSON.stringify($jsondata)
}).done( ($data) => {
	$access_token = $data.access_token;
});

「client_id」と「client_secret」には先ほど発行したIDとキーを設定します。既存のユーザ名とパスワードを入力して「/oauth/token」にリクエストすると、アクセストークンが取得できます。

取得したアクセストークンを使って、先ほど認証をかけたAPIにアクセスしてみると、無事にユーザ情報データが取得できます。

$.ajax({
	headers: {
		Accept: "application/json",
		Authorization: 'Bearer '+$access_token
	},
	url:'/api/user',
	type:'GET',
})
.done( ($data) => {
	console.log($data);
});

ちなみに認証に失敗、またはトークンに不備があると、認証エラーとなりAPIにはアクセスできません。

Unauthenticated.

少し複雑ですが、慣れてしまえば簡単に構築できますね。
OAuthについても少し詳しくなれたかな。

B!

Comment

Comment Form

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

Monthly Archives