これからはじめるバックエンド技術 〜OAuthとWeb APIの基礎〜

1.6K Views

January 11, 19

#yjfukuoka

スライド概要

iOSやAndroidのネイティブアプリケーションの多くはクライアントとサーバー間で情報をやりとりします。Webアプリケーションにおいても自社の機能を他社へ提供する場合や、他社の機能を自社で利用する場合にはサーバー間で情報をやりとりします。これらはユーザーのログインとIDにひもづく情報の更新や参照の機能が必要です。今回は、バックエンド技術の入門者向けにこれらの実装に必要なOAuthとWeb APIの基礎を解説をします。

profile-image
スライド一覧

2023年10月からSpeaker Deckに移行しました。最新情報はこちらをご覧ください。 https://speakerdeck.com/lycorptech_jp

シェア

またはPlayer版

埋め込む »CMSなどでJSが使えない場合

（ダウンロード不可）

関連スライド

slide-thumbnail

深層学習による自然言語処理入門: word2vecからBERT, GPT-3まで
user-img Yahoo!デベロッパーネットワーク 194.1K
slide-thumbnail

ゼロから始める転移学習
user-img Yahoo!デベロッパーネットワーク 92.3K
slide-thumbnail

ヤフーにおける WebAuthn と Passkey の UX の紹介と考察 #idcon #fidcon
idcon fidcon
user-img Yahoo!デベロッパーネットワーク 82.9K
slide-thumbnail

OpenID Connectとネイティブアプリを取り巻く仕様と動向 Yahoo! JAPANの取り組み #openid #openid_tokyo
openid openid_tokyo
user-img Yahoo!デベロッパーネットワーク 65.6K
slide-thumbnail

運用業務とスクラムは本当に組み合わせにくいのか︖運用業務が大半を占めるプロダクト開発での試行錯誤
devsumi
user-img Yahoo!デベロッパーネットワーク 43.5K
slide-thumbnail

ヤフーのオンプレ機械学習基盤AIPFについて #ml_kubernetes
ml_kubernetes
user-img Yahoo!デベロッパーネットワーク 33.7K
各ページのテキスト
1.

ヤフー福岡 Tech Meetup #2 これからはじめるバックエンド技術 〜OAuthとWeb APIの基礎〜 2018年12月19日 ヤフー株式会社 倉林 雅 Copyright (C) 2018 Yahoo Japan Corporation. All Rights Reserved.

2.

プロフィール 倉林 雅 (kura) IDソリューション本部 リーダー・エンジニア Security-Board 認証技術黒帯 IDサービス統括本部 セキュリティ責任者 OpenID ファウンデーション・ジャパン 理事、エバンジェリスト @kura_lab 2 Copyright (C) 2018 Yahoo Japan Corporation. All Rights Reserved.

3.

黒帯制度 KURO-OBI 黒帯とは「該当分野について 突出した知識とスキルを 持っている第一人者」のこと 社内黒帯制度 http://hr.yahoo.co.jp/workplace/culture.html 3 Copyright (C) 2018 Yahoo Japan Corporation. All Rights Reserved.

4.

アジェンダ 1. Yahoo! JAPANにおけるフロントエンド とバックエンドの概要 2. 一般的なフロントエンドとバックエンド 3. Web APIで必要な機能 4. OAuth 2.0 -Authorization Code Grant- 5. まとめ 4 Copyright (C) 2018 Yahoo Japan Corporation. All Rights Reserved.

5.

App User Agent AuthN AuthZ Proxy API DB Lounch AuthZ Request Login ID+Password Redirect Redirect Consent AuthZ Code AuthZ Code Access Token Access Token Credential ID Response View 5 Copyright (C) 2018 Yahoo Japan Corporation. All Rights Reserved.

6.

Web APIに必要な機能や役割を学び OAuthのシーケンスを理解する 6 Copyright (C) 2018 Yahoo Japan Corporation. All Rights Reserved.

7.

Yahoo! JAPANにおける フロントエンドとバックエンドの概要 Copyright (C) 2018 Yahoo Japan Corporation. All Rights Reserved.

8.

メディア コマース プラットフォーム インフラ 8 Copyright (C) 2018 Yahoo Japan Corporation. All Rights Reserved.

9.

メディア コマース プラットフォームやインフラが メディアやコマースのサービスを支える組織体制 プラットフォーム インフラ 9 Copyright (C) 2018 Yahoo Japan Corporation. All Rights Reserved.

10.

メディア 検索 ニュース FE BE FE BE ... FE BE FE BE FE BE ... FE BE コマース プラットフォーム インフラ 10 Copyright (C) 2018 Yahoo Japan Corporation. All Rights Reserved.

11.

メディア 検索 ニュース FE BE FE BE ... FE BE FE BE FE BE ... FE BE コマース ショッピング ヤフオク FE BE FE BE ... FE BE FE BE FE BE ... FE BE プラットフォーム インフラ 11 Copyright (C) 2018 Yahoo Japan Corporation. All Rights Reserved.

12.

メディア 検索 ニュース FE BE FE BE ... FE BE FE BE FE BE ... FE BE コマース ショッピング ヤフオク FE BE FE BE ... FE BE FE BE FE BE ... FE BE プラットフォーム CDN PaaS OAuth FE BE FE BE FE BE FE BE FE BE FE BE ... FE BE インフラ 12 Copyright (C) 2018 Yahoo Japan Corporation. All Rights Reserved.

13.

メディア 検索 ニュース FE BE FE BE ... FE BE FE BE FE BE ... FE BE コマース ショッピング ヤフオク FE BE FE BE ... FE BE FE BE FE BE ... FE BE プラットフォーム CDN PaaS OAuth FE BE FE BE FE BE FE BE FE BE FE BE ... FE BE エンジニアは各サービス、各プラットフォームごとに 持っている機能のフロントエンド（FE）と バックエンド（BE）を担当している 13 Copyright (C) 2018 Yahoo Japan Corporation. All Rights Reserved.

14.

一般的な フロントエンドとバックエンド Copyright (C) 2018 Yahoo Japan Corporation. All Rights Reserved.

15.

FE BE 15 Copyright (C) 2018 Yahoo Japan Corporation. All Rights Reserved.

16.

Web App API DB 16 Copyright (C) 2018 Yahoo Japan Corporation. All Rights Reserved.

17.

Web App API API API API API API DB 17 Copyright (C) 2018 Yahoo Japan Corporation. All Rights Reserved.

18.

Web App API API API API API API DB DB DB DB 18 Copyright (C) 2018 Yahoo Japan Corporation. All Rights Reserved.

19.

フロントエンドは Webとネイティブアプリに分類される Web App API API API API API DB DB バックエンドは Webとネイティブアプリで使用される APIとデータベースで構成される 19 Copyright (C) 2018 Yahoo Japan Corporation. All Rights Reserved.

20.

Web APIで必要な機能 Copyright (C) 2018 Yahoo Japan Corporation. All Rights Reserved.

21.

Web App API DB DB 21 Copyright (C) 2018 Yahoo Japan Corporation. All Rights Reserved.

22.

Web API DB App API DB 22 Copyright (C) 2018 Yahoo Japan Corporation. All Rights Reserved.

23.

Webはブラウザーで表示される画面を返却する フロントエンドとその要素をデータベースから 取得するためのAPIで構成される ブラウザー FE API DB App API DB ネイティブアプリは直接APIから情報を取得し クライアントサイドで描画を行う 23 Copyright (C) 2018 Yahoo Japan Corporation. All Rights Reserved.

24.

ブラウザー FE API DB App API DB 24 Copyright (C) 2018 Yahoo Japan Corporation. All Rights Reserved.

25.

ブラウザー FE API DB ユーザー認証は？ App API DB 25 Copyright (C) 2018 Yahoo Japan Corporation. All Rights Reserved.

26.

ブラウザー Cookie FE API DB Webはログインして 発行されるCookieで認証 App API DB 26 Copyright (C) 2018 Yahoo Japan Corporation. All Rights Reserved.

27.

ユーザー認証は？ App API DB 27 Copyright (C) 2018 Yahoo Japan Corporation. All Rights Reserved.

28.

ユーザー情報が含まれる トークンで認証 Access Token App API DB 28 Copyright (C) 2018 Yahoo Japan Corporation. All Rights Reserved.

29.

認可（Authorization）サーバーが トークンを発行 Access Token AuthZ DB App Access Token API DB 29 Copyright (C) 2018 Yahoo Japan Corporation. All Rights Reserved.

30.

User Agent UserAgentから 送信されるCookieで認証 Cookie AuthZ DB Access Token App Access Token API DB 30 Copyright (C) 2018 Yahoo Japan Corporation. All Rights Reserved.

31.

ログインしてCookieを発行 AuthN (Login) 認証（Authentication） サーバー ID+PassWord User Agent Cookie Cookie AuthZ DB Access Token App Access Token API DB 31 Copyright (C) 2018 Yahoo Japan Corporation. All Rights Reserved.

32.

ID+PassWord User Agent Cookie Cookie AuthN (Login) AuthZ DB DB トークンを検証し認証情報を APIサーバーへ受け流す Access Token App Access Token Proxy Credential API DB 32 Copyright (C) 2018 Yahoo Japan Corporation. All Rights Reserved.

33.

ID+PassWord User Agent Cookie Cookie AuthN (Login) AuthZ DB DB 認証情報からIDを参照し ユーザー情報の更新や参照を行う Access Token App Access Token Proxy Credential API ID DB 33 Copyright (C) 2018 Yahoo Japan Corporation. All Rights Reserved.

34.

ID+PassWord User Agent Cookie Cookie AuthN (Login) AuthZ DB DB Access Token App Access Token Proxy Credential API ID DB 34 Copyright (C) 2018 Yahoo Japan Corporation. All Rights Reserved.

35.

OAuth 2.0 Authorization Code Grant Copyright (C) 2018 Yahoo Japan Corporation. All Rights Reserved.

36.

App User Agent AuthN AuthZ Proxy API DB Lounch アプリのログイン機能を 呼び出す 36 Copyright (C) 2018 Yahoo Japan Corporation. All Rights Reserved.

37.

App User Agent AuthN AuthZ Proxy API DB Lounch AuthZ Request ブラウザーなどのUser Agentを利用して 認可サーバーへリクエスト 37 Copyright (C) 2018 Yahoo Japan Corporation. All Rights Reserved.

38.

App User Agent AuthN AuthZ Proxy API DB Lounch AuthZ Request Redirect 未ログイン（Cookie未発行）の場合は 認証サーバーへリダイレクト 38 Copyright (C) 2018 Yahoo Japan Corporation. All Rights Reserved.

39.

App User Agent AuthN AuthZ Proxy API DB Lounch AuthZ Request Login ID+Password ログイン画面でIDとパスワードなどで 認証を行う 39 Copyright (C) 2018 Yahoo Japan Corporation. All Rights Reserved.

40.

App User Agent AuthN AuthZ Proxy API DB Lounch AuthZ Request Login ID+Password Redirect ログイン後（Cookie発行済み）に 再度認可サーバーへ処理が戻る 40 Copyright (C) 2018 Yahoo Japan Corporation. All Rights Reserved.

41.

App User Agent AuthN AuthZ Proxy API DB Lounch AuthZ Request Login ID+Password Redirect Consent ユーザー情報や機能の提供など 必要に応じて同意画面を表示し 同意を取得する 41 Copyright (C) 2018 Yahoo Japan Corporation. All Rights Reserved.

42.

App User Agent AuthN AuthZ Proxy API DB Lounch AuthZ Request Login ID+Password Redirect Consent AuthZ Code 同意取得後、認可コードが付与されたURIを User Agentへ返却しアプリで抽出 42 Copyright (C) 2018 Yahoo Japan Corporation. All Rights Reserved.

43.

App User Agent AuthN AuthZ Proxy API DB Lounch AuthZ Request Login ID+Password Redirect Consent AuthZ Code AuthZ Code Access Token HTTP通信で認可コードを送信し Access Tokenを取得 43 Copyright (C) 2018 Yahoo Japan Corporation. All Rights Reserved.

44.

App User Agent AuthN AuthZ Proxy API DB Lounch AuthZ Request Login ID+Password Redirect Consent AuthZ Code Access Token Access Token Access TokenはProxyで検証し 認証情報がAPIサーバーへ送信される Credential ID 認証情報からユーザーを特定し データベースから情報を取得する 44 Copyright (C) 2018 Yahoo Japan Corporation. All Rights Reserved.

45.

App User Agent AuthN AuthZ Proxy API DB Lounch AuthZ Request Login ID+Password Redirect Consent AuthZ Code Access Token Access Token Credential ID Response View 取得したユーザー情報を表示 45 Copyright (C) 2018 Yahoo Japan Corporation. All Rights Reserved.

46.

まとめ Copyright (C) 2018 Yahoo Japan Corporation. All Rights Reserved.

47.

まとめ 1. Yahoo! JAPANでは各サービス、プラット フォームにおいてFEとBEが存在する 2. 一般的にフロントエンドはWebとアプリ、バッ クエンドはAPIとDBで構成される 3. Web APIを提供するためには認証サーバー、認 可サーバー、Proxyなどが必要となる 4. OAuth 2.0によってアプリのユーザー情報の更 新、参照が可能となる 47 Copyright (C) 2018 Yahoo Japan Corporation. All Rights Reserved.

48.

ご清聴ありがとうございました Copyright (C) 2018 Yahoo Japan Corporation. All Rights Reserved.