Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
6
Help us understand the problem. What is going on with this article?
@guromityan

OAuth 2.0 のシーケンスをまとめてみた

More than 1 year has passed since last update.

はじめに

最近、Vue.js と Flask で API とそれを叩くページを作成しています。
その際、認証周りをどうしようかと悩んで、調べていくと OAuth
いいんじゃないか、という結論に行きつきますが Qiita などを見ながら調べてもよくわかりませんでした。

そんな中、とってもわかりやすい資料を見つけました。
[Slide Share] 基礎からの OAuth 2.0 - Developers.IO 2017
しかも何と、YouTube で解説動画もあります。
[YouTube] DevelopersIO 2017 基礎からの OAuth 2.0 perform by 都元ダイスケ #cmdevio2017

この資料の内容を部分的にピックアップしていきます。

認証と認可

認証 (Authentication)

通信相手が誰か、確認すること

  • ネットワークやサーバへアクセスする際に、本人性をチェックし、正規の利用者であるかどうかを確認。
  • 確認方法は通常、ID/Password で行う。
  • HTTP status "401 Unauthorized" に関わる

認可 (Authorization)

リクエストが許可されるかどうかを決めること

  • 認証によって利用者を識別し、その利用者に合ったアクセス権限の制御を行う。(ポリシー)
  • HTTP status "403 Forbidden" に関わる

通常、認証 -> 認可 の流れでユーザは与えられた権限内でリソースへのアクセスを行う。

OAuth 2.0 の登場人物

キーワード 説明
Resource owner (RO) ユーザ、Client のリソースへのアクセスを認可する
Client アプリ、RS が抱えるユーザリソースへのアクセスを行う張本人
Authorization server (AS) RO/RS の仲介役、Client へ RS へのアクセスのキーとなるアクセストークンを発行する
Resource server (RS) ユーザリソース、アクセストークンがなければアクセスすることができない

OAuth 2.0 の基本的な流れとしては、RS にあるユーザリソースにアクセスしたい Client が、AS からアクセストークンを発行してもらい、そのアクセストークンを持って Client は RS にアクセスをする。アクセストークンの発行は、 RO が認可をする。

Client がアクセストークンを取得するフロー

Client credentials grant

OAuth 2.0 - client credentials grant.png

ポイント

  • Client ID + secret => アクセストークン
  • リソースオーナーの認可無しに、AS はアクセストークンを発行
  • リソースオーナーがフローに介在しないため、Client は好きなスコープでリソースにアクセスできてしまう

Resource owner password credentials grant

OAuth 2.0 - resource owner password grant.png

ポイント

  • User ID + Password => アクセストークン
  • Client が リソースオーナーのパスワードを知ってしまう
  • 公式 Client 向け

Implicit grant

OAuth 2.0 - Implicit grant.png

ポイント

  • アクセストークンがユーザやブラウザに見えてしまう
  • エンドユーザ支配下にある Client 向け

Authorization code grant

OAuth 2.0 - Authorization code grant.png

ポイント

  • Authorization code (AC) => アクセストークン
  • AC はアクセストークンを得るための引換券であり、ユーザやブラウザから見えても問題ない
  • サーバサイド Web アプリケーション Client 向け

取得したアクセストークンの送信方法

Authorization ヘッダの Bearer スキームを使用

Authorization: Bearer <ACCESS TOKEN>

おまけ

OAuth の各種フローのシーケンス図は、PlantUML というツールを使用して作成しています。
コードベースで図を作成でき、とてもかんたんです。
ソースコードは、GitHub で公開しておきます。
[GitHub] guromityan/oauth_plant_uml

6
Help us understand the problem. What is going on with this article?
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
guromityan
地元 岐阜から福岡 SIer に就職して 3 年目。最近は Web 系にも興味があり AWS SAA の資格も取ったりしました。新しい物好きな性格で、日々技術のトレンドを追っています。かの有名な織田信長も新しい物好きが高じて初めて戦に鉄砲を導入したのは有名な話ですね。岐阜駅前の金の信長像は確実に我々岐阜県民に DNA 的な、脳波的な、エスパー伊東的な、何かで影響を与えていると思ってます。🥺ぴぇん

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
6
Help us understand the problem. What is going on with this article?