OAuth 2.0がどのようなもので、どのようにOAuth 2.0で動作するかについての簡単なイントロを得てください.例としてGoogle Sign Inを使用して簡単な用語で説明しました.

我々は、コッターは現在、認証トークンとリフレッシュトークンを生成することを伝えることに興奮している.まず最初にOAuth 2.0とトークンの概念について行きましょう.
概要

What is OAuth 2.0

OAuth 2.0 in Action

OAuth Tokens : 短寿命アクセストークンと長寿命リフレッシュトークン

How to Implement OAuth 2.0 for your site

OAuth 2.0とは

OAuth 2.0は、サードパーティ製のアプリケーションがユーザからセキュリティの詳細(ユーザ名、パスワードなど)を必要とせずに安全にサービスへのアクセスを取得できる方法を定義する承認フレームワークです.OAuth 2.0の一般的な例は、他のウェブサイトにログインするために“Googleでログイン”を使用するときです.

OAuthの2.0アクション

一般に、AuAuth 2.0フローは次のようになります.
Google 2.0でのoauthの2.0フロー

例として「Googleでサインイン」を使おう。

アルバート湖はGoogleカレンダーのユーザーであり、彼はカレンダーを使用しようとしている.彼のカレンダーを管理するためにCOM.次の例でその条件を調べます.

1)当たり前.comはアルバート湖のGoogleカレンダーにアクセスしたい.カレンダー.comは、彼がカレンダーの許可をカレンダーの許可を与える彼のGoogleアカウントに署名するためにアルバート湖をリダイレクトします.COM .(2)Googleは認可付与を返し、アルバート湖をカレンダーにリダイレクトする.COM .
3)カレンダー.COMはGoogleにアクセス許可を与え、(4)アクセストークンを受け取る.
5)カレンダー.comは今(6)アクセスアルバート湖のGoogleカレンダーには、このアクセストークンを使用することができますが、彼のGoogleドライブや他のリソースではありません.

ここでは、カレンダー.comは、クライアントは、アルバート湖はリソースの所有者は、Googleアカウントは、認定サーバーであり、Googleカレンダーはリソースサーバーです.

簡単な例で用語を理解しようとしましょう。

ホテルに泊まっている彼女のベビーシッター、キャンディを許したいアルバータの例を使いましょう.

アルバータは、キャンディが彼女の部屋にアクセスして、受付から彼女自身の部屋キーを得るためにキャンディを尋ねると同意します.アルバータは彼女のIDのコピーをキャンディに与えます、そして、メモは「昼間だけの間のアクセス」と言います.

キャンディは、アルバータのIDとメモのコピーで受付に行きます.受付はIDを確認し、昼間にのみ使用できる特別な部屋のキーをキャンディを与えます.
キャンディは部屋に戻って、部屋にアクセスするために彼女のキーを使用します.

キャンディクライアント(ちょうどCalendly . comのように)アルバータのデータにアクセスしたいクライアントです.ここのアルバータは、クライアントへの限られたアクセスを与えています.認可金は、アルバータのIDコピーと彼女のメモです.

受付は認可サーバーです、彼らは部屋にアクセスするキャンディのためのルームキーを生成することができます.このルームキーはアクセストークンと等価で、リソースを取得するために使用できます.

ルームロックはリソースサーバーです、それはキャンディが望むリソースを持ちます:部屋.

OAuth 2.0が提供するいくつかの異なる流れがあります、この例は認可コード流れに続いています.別の流れについては別のポストアンクについて話します:)

オーウストークン

前述のように、クライアントは、フローの最後に、アクセストークンを受け取る.一般に、これらのアクセストークンは短命であるそれで、それが期限が切れるとき、何が起こりますか?

短寿命アクセストークンと長寿命リフレッシュトークン

ステップ4で、認可サーバは2トークン、アクセストークンおよびリフレッシュトークンを生成できる.アクセストークンは短命であるが、数時間から数週間の間のみである.
アクセストークンが期限切れになると、アプリケーションは新しいトークンを取得するためにリフレッシュトークンを使用できます.これは、ユーザに再認証するように頼まなければならないのを防ぎます.

アクセストークン

さて、どうやって動作するかを理解しているので、アクセストークンの生成方法について考え始めましょう.短寿命のアクセストークンを使用すると、JWTトークンを使用して、自己エンコード型のアクセストークンを作成できます.
JWTトークンがどのように見えるか
JSONウェブトークン(JWT)は署名されたJSONオブジェクトです.これは、JSONオブジェクトに含まれるデータを署名を検証することで信頼できることを意味します.ユーザーを許可するために、JWTにユーザーのIDとメールを含めることができます.
JWT Accessトークンをリソースサーバー(バックエンドAPIサーバー)に与えると、データベースにアクセスする必要がなくJWTトークンを検証できます.
すべてのサーバが行う必要があるのは、JWTトークンがライブラリを使用して有効であることを検証することです.トークンから要求を行うユーザーのユーザーIDを参照し、このユーザーIDが既に認証されていることを信頼します.

トークンを更新する

リフレッシュトークンを用いたアクセストークンの更新
リフレッシュトークンは新しいアクセストークンを得るために使用される特別なトークンです.これが長寿命であるので、リフレッシュトークンは一般にデータベースに格納される不透明な文字列である.データベース内のリフレッシュトークンを保存すると、データベースから削除することによって、それらを取り消すことができます.
アクセストークンを使い果たす方法がないので、アクセストークンを短命にする必要があります.リフレッシュトークンを無効にすると、悪意のあるパーティーが期限切れのアクセストークンをリフレッシュできません.これは、あなたのアクセストークンが1時間で期限切れになるならば、あなたのアクセストークンを得た攻撃者はそれが期限が切れる前に1時間だけあなたのAPIにアクセスすることができるということを意味します.

あなたのサイトのためにOAuth

これは多くのように聞こえるが、OAuth 2.0を実装することができますし、わずか数分でコッターを使用してアクセストークンを使用してAPI要求を承認します.

クライアントとしてあなたのウェブサイト、認証サーバーとしてコッター

上にOAuthフローがあります.

あなたのウェブサイトはクライアントです

ユーザはリソースオーナーです

コッターは認可サーバーです

あなたのバックエンドサーバーは、リソースサーバーです

アクセストークンの生成と生成

ユーザを認証し、アクセストークンを生成するためにいくつかの5分のクイックスタートがあります.

WebHTML , React , また、私たちとチュートリアルをチェックしてください.

モバイルReact Native , Flutter , iOS , Android

このガイドでは、例として反応を使用します.我々は、電子メールマジックリンクでログインフォームを構築し、流れの最後にアクセストークンを取得します.

輸入コッター

yarn add cotter

電子メールログインフォームを初期化し、表示します

import React, { useEffect } from "react";
import Cotter from "cotter"; // 1️⃣ Import Cotter

function App() {
  useEffect(() => {
    // 2️⃣ Initialize and show the form
    var cotter = new Cotter(API_KEY_ID); // 👈 Specify your API KEY ID here
    cotter
      .signInWithLink() // use Magic link
      .showEmailForm() // show email login form
      .then(resp => console.log(resp))
      .catch(err => console.log(err));
  }, []);

  return (
    // 3️⃣ Put a <div> with id "cotter-form-container"
    // that will contain the form
    <div id="cotter-form-container" style={{ width: 300, height: 300 }} />
  );
}

export default App;

アプリ.js
あなたはあなたを得ることができますAPI_KEY_ID からthe dashboard 無料のアカウントを作成することによって.

それです。コンソールログをアクセストークンでチェックします。

上記の機能はOAuth 2.0フローのステップ1 - 4をカバーします.からの応答showEmailForm() アクセストークンを返します.前述のように、このアクセストークンを使用して、バックエンドサーバーのリソースにアクセスする必要があります.
たとえば、このアクセストークンをエンドポイントに含めることができます/api/private-resource そして、あなたはcheck if the access token is valid リクエストを続行する前に.

次は何ですか。

ここで、アクセストークンを取得する方法を知っているので、ログインフローをラップするためにさらにいくつかのことがあります.

OAuth Tokens from Cotter : どのようにトークンを取得し、どのように見えるのですか.

.

フロントエンドでしっかりと保管する方法.我々は、来週、これをカバーします.

質問とフィードバック

あなたが助けを必要とするか、どんなフィードバックも持っているならば、我々にpingしてくださいCotter's Slack Channel ! 我々は助けるためにここにいる.

準備ができてコッターを使用する？

あなたがこのチュートリアルを楽しんで、あなたのウェブサイトまたはアプリにコッターを統合したいならば、あなたはそうすることができますcreate a free account and check out our documentation .