Roll With IT

tamakiのIT日記

OAuth 2.0を使ってGoogle APIにアクセスする

はじめに

Next.jsとRailsを使ってオリジナルのWebアプリを開発しています。

github.com

今回ログイン機能を備えたアプリにするために、Google認証でログインする方法を選択しました。

この記事では、Google APIの設定手順に焦点を当てています。実際のログイン機能の実装については以下の記事で取り上げます。

OAuthってなに?

まずはここからだと思いますが、いろんなところで紹介されている有名なOAuthの説明記事ですがご紹介。私もこれが一番わかりやすいと思いました。

qiita.com

雑にまとめると、OAuth 2.0とは、アクセストークンを用いてパスワードやIDを入力することなく自作したアプリで GoogleTwitterFacebookなどのプロバイダーと連携させる事ができ、連携先のプロバイダーに保存されている情報にアクセスするためのしくみのことを指します。

ちなみに、OAuth1.0 との違いは、以下の課題を解決するために仕様策定され、2012年にRFCとして発行されたのがOAuth 2.0とのことです。

OAuth 1.0が抱えていた課題

  • 認証と署名の複雑さ
  • デスクトップ/モバイルアプリへの対応が不充分
  • プロバイダのサーバスケールが困難

OAuth2.0を使った認証で何ができるのか?

developers.google.com

OAuth2.0のしくみを利用することで、クライアントから特定のAPIにアクセスするための認証を行うことができます。今回はNext.jsとRailsで開発しているので、ここでいうクライアントはNext.jsのプロジェクトを指します。Next.jsでNextAuth.jsというパッケージを利用し、Google API Consoleで設定したOAuth 2.0認証情報を取得します。この認証情報を使って、Googleアカウントでログインする権限(認可)を得ることができ、特定のGoogleアカウントでWebアプリにログインし利用することが可能になります。

Google認証ログインは、Googleアカウントを使用してアプリに簡単かつ安全にログインできる機能です。この機能のおかげで、Googleアカウントを持っていれば誰でも簡単にWebアプリにログインして利用することができます。

これは、Googleが特定のWebアプリに対してIDとパスワードを教え「認証の手段」を丸ごと渡してしまうのでなく、GoogleアカウントでログインしWebアプリの操作を行える権限を与えること、即ち「認可」だけを渡しているのがポイントです。

通常、Webサービスを利用するには、個別にユーザーIDとパスワードを入力してユーザーを認証する必要がありますが、OAuth2.0のしくみを利用することで、IDやパスワードを入力することなくユーザーを認証することができ、認証したユーザーに対してWebアプリへログインし操作する権限を与えることができます。

「認証」と「認可」は似てますが意味が違います。当初OAuthの理解に苦しみましたが、このキーワードとなる言葉の違いを理解しだいぶスッキリしました。以下のサイトが参考になります。

dev.classmethod.jp

OAuth2.0のしくみを利用するために、まずはGoogle API ConsoleページでGoogle APIの設定を行う必要があります。

以下、手順についてまとめたいと思います。

Google APIの設定手順

1.Google Cloud Platformの設定ページへアクセスする

console.cloud.google.com

2.プロジェクトを作成しnext-rails-google-authと名前を付ける

今回は、Next.jsとRailsを使ってgoogle認証を行うアプリなので、next-rails-google-authとします。

3.メニューの「APIとサービス」>「OAuth同意画面」> User Typeは「外部」を選択して「作成」をクリックする

4.アプリ名、メールアドレスを入力し「保存して次へ」をクリックする

5.「スコープを追加または削除」で「Googleアカウントのメインのメールアドレスの参照」をチェックして「更新」したのち、「保存して次へ」をクリックする

6.「+ADD USERS」をクリックして自分のメールアドレスを追加したら、「保存して次へ」をクリックする

7.「APIとサービス」のメニューの「認証情報」>「認証情報を作成」>「OAuthクライアントID」を選択する

8.アプリケーションの種類、名前、承認済みのJavaScript生成元、承認済みのリダイレクトURIを入力し「作成」をクリックする。

承認済みのJavaScript生成元

フロントエンドのオリジンを入力します。 オリジンとは、URLのスキーム(プロトコル)、ホスト(ドメイン)、ポート番号の組み合わせで定義されたものです。JavaScript生成元であるNext.js側で使われるオリジンを指します。

承認済みのリダイレクトURI

ユーザーがGoogleから認証を受けた後にリダイレクトされるパスのことを指します。今回はNext.jsのnext-authというnpmを使って認証処理を行うので、以下の宛先にリダイレクトするように設定しています。

ドキュメントには、For development: http://localhost:3000/api/auth/callback/googleと書いてありますが、今回はポートを4000に変更しているため、http://localhost:4000/api/auth/callback/googleと指定しています。

// frontend/package.json

    "dev": "next dev -p 4000",

9.「OAuth クライアントを作成しました」とのポップアップにクライアントIDとクライアントシークレットが表示される。コピーして取っておく(ローカルのメモ帳などで管理)

10.「APIとサービス」のメニューの「ライブラリ」からGoogle+ APIを選択して「有効にする」をクリックする

これでGoogle APIの設定は完了です。