PKCEを使った認可コードフローでログインを追加する
ネイティブやモバイル、シングルページのアプリケーションにログインを追加するのに、PKCEを使った認可コードフローを活用することができます。フローの仕組みやメリットについては、「Proof Key for Code Exchange(PKCE)を使った認可コードフロー」をお読みください。ネイティブやモバイル、シングルページのアプリケーションからAPIを呼び出す方法については、「PKCEを使った認可コードフローで独自のAPIを呼び出す」をお読みください。
Proof Key for Code Exchange(PKCE)を使った認可コードフローを実装するには、以下のリソースを使用することができます。
Auth0 Mobile SDKとAuth0 Single-Page App SDK:フローを実装する最も簡単な方法です。難しくて手間がかかる作業のほとんどが処理されます。Mobile QuickstartsとSingle-Page App Quickstartsでこのプロセスについて説明しています。
認証API:独自のソリューションを構築したい場合は、このまま読み続けて、APIを直接呼び出す方法を学習してください。
ログインに成功すると、アプリケーションがユーザーのIDトークンとアクセストークンにアクセスします。IDトークンには基本的なユーザープロファイル情報が含まれています。アクセストークンはAuth0の/userinfo
エンドポイントや独自の保護されたAPIを呼び出すのに使用することができます。IDトークンの詳細については、「IDトークン」をお読みください。アクセストークンの詳細については、「アクセストークン」をお読みください。
前提条件
アプリをAuth0に登録する必要があります。詳細については、「ネイティブアプリケーションを登録する」または「シングルページWebアプリケーションを登録する」をお読みください。
アプリケーションタイプに応じて、[Native(ネイティブ)]または[Single-Page App(シングルページアプリ)]の[Application Type(アプリケーションタイプ)]を選択します。
YOUR_CALLBACK_URL
の[Allowed Callback URL(許可されているコールバックURL)]を追加します。コールバックURLの形式は、使用しているアプリケーションタイプとプラットフォームによって異なります。アプリケーションタイプの形式とプラットフォームの詳細については、「Mobile/Native Quickstarts」と「Single-Page App Quickstarts」を参照してください。アプリケーションの[Grant Types(付与タイプ)]に[Authorization Code(認可コード)]が必ず含まれていることを確認してください。詳細については、「付与タイプを更新する」をお読みください。
コードベリファイアを作成する
code_verifier
を作成します。これは、トークンを要求するために最終的にAuth0に送信される、暗号的にランダムなBase64でエンコードされたキーです。
code_verifier
を作成するアルゴリズムの詳細については、OAuth Proof Key for Code Exchange仕様の「4.1 Client Creates a Code Verifier(クライアントがコード検証を作成)」セクションをお読みください。
Javascriptのサンプル
// Dependency: Node.js crypto module
// https://nodejs.org/api/crypto.html#crypto_crypto
function base64URLEncode(str) {
return str.toString('base64')
.replace(/\+/g, '-')
.replace(/\//g, '_')
.replace(/=/g, '');
}
var verifier = base64URLEncode(crypto.randomBytes(32));
Was this helpful?
Javaのサンプル
// Dependency: Apache Commons Codec
// https://commons.apache.org/proper/commons-codec/
// Import the Base64 class.
// import org.apache.commons.codec.binary.Base64;
SecureRandom sr = new SecureRandom();
byte[] code = new byte[32];
sr.nextBytes(code);
String verifier = Base64.getUrlEncoder().withoutPadding().encodeToString(code);
Was this helpful?
Androidのサンプル
// Dependency: Apache Commons Codec
// https://commons.apache.org/proper/commons-codec/
// Import the Base64 class.
// import org.apache.commons.codec.binary.Base64;
SecureRandom sr = new SecureRandom();
byte[] code = new byte[32];
sr.nextBytes(code);
String verifier = Base64.encodeToString(code, Base64.URL_SAFE | Base64.NO_WRAP | Base64.NO_PADDING);
Was this helpful?
Swift 5のサンプル
var buffer = [UInt8](repeating: 0, count: 32)
_ = SecRandomCopyBytes(kSecRandomDefault, buffer.count, &buffer)
let verifier = Data(buffer).base64EncodedString()
.replacingOccurrences(of: "+", with: "-")
.replacingOccurrences(of: "/", with: "_")
.replacingOccurrences(of: "=", with: "")
Was this helpful?
Objective-Cのサンプル
NSMutableData *data = [NSMutableData dataWithLength:32];
int result __attribute__((unused)) = SecRandomCopyBytes(kSecRandomDefault, 32, data.mutableBytes);
NSString *verifier = [[[[data base64EncodedStringWithOptions:0]
stringByReplacingOccurrencesOfString:@"+" withString:@"-"]
stringByReplacingOccurrencesOfString:@"/" withString:@"_"]
stringByTrimmingCharactersInSet:[NSCharacterSet characterSetWithCharactersInString:@"="]];
Was this helpful?
コードチャレンジを作成する
authorization_code
を要求するためにAuth0に送信されるcode_verifier
からcode_challenge
を生成します。
code_challenge
がcode_verifier
からどのように派生するかの詳細については、OAuth Proof Key for Code Exchange仕様の「4.2 Client Creates the Code Challenge(クライアントがコードチャレンジを作成)」セクションをお読みください。
Javascriptのサンプル
// Dependency: Node.js crypto module
// https://nodejs.org/api/crypto.html#crypto_crypto
function sha256(buffer) {
return crypto.createHash('sha256').update(buffer).digest();
}
var challenge = base64URLEncode(sha256(verifier));
Was this helpful?
Javaのサンプル
// Dependency: Apache Commons Codec
// https://commons.apache.org/proper/commons-codec/
// Import the Base64 class.
// import org.apache.commons.codec.binary.Base64;
byte[] bytes = verifier.getBytes("US-ASCII");
MessageDigest md = MessageDigest.getInstance("SHA-256");
md.update(bytes, 0, bytes.length);
byte[] digest = md.digest();
String challenge = Base64.encodeBase64URLSafeString(digest);
Was this helpful?
Swift 5のサンプル
import CommonCrypto
// ...
guard let data = verifier.data(using: .utf8) else { return nil }
var buffer = [UInt8](repeating: 0, count: Int(CC_SHA256_DIGEST_LENGTH))
_ = data.withUnsafeBytes {
CC_SHA256($0.baseAddress, CC_LONG(data.count), &buffer)
}
let hash = Data(buffer)
let challenge = hash.base64EncodedString()
.replacingOccurrences(of: "+", with: "-")
.replacingOccurrences(of: "/", with: "_")
.replacingOccurrences(of: "=", with: "")
Was this helpful?
Objective-Cのサンプル
// Dependency: Apple Common Crypto library
// http://opensource.apple.com//source/CommonCrypto
u_int8_t buffer[CC_SHA256_DIGEST_LENGTH * sizeof(u_int8_t)];
memset(buffer, 0x0, CC_SHA256_DIGEST_LENGTH);
NSData *data = [verifier dataUsingEncoding:NSUTF8StringEncoding];
CC_SHA256([data bytes], (CC_LONG)[data length], buffer);
NSData *hash = [NSData dataWithBytes:buffer length:CC_SHA256_DIGEST_LENGTH];
NSString *challenge = [[[[hash base64EncodedStringWithOptions:0]
stringByReplacingOccurrencesOfString:@"+" withString:@"-"]
stringByReplacingOccurrencesOfString:@"/" withString:@"_"]
stringByTrimmingCharactersInSet:[NSCharacterSet characterSetWithCharactersInString:@"="]];
Was this helpful?
ユーザーを認可する
ユーザーの認可を要求すると、authorization_code
でアプリにリダイレクトされます。
code_verifier
とcode_challenge
を作成したら、ユーザーの認可を取得する必要があります。技術的には、これが認可フローの始まりとなります。この手順には以下のようなプロセスが含まれます:
* ユーザーを認証する。 * 認証を行うために、ユーザーをIDプロバイダーへリダイレクトする。 * アクティブなシングルサインオン(SSO)セッションを確認する。 * 以前に同意を得ていない場合は、要求された権限レベルについてユーザーの同意を得る。
ユーザーを認可するために、アプリは前のステップで生成したcode_challenge
とcode_challenge
の生成に使用したメソッドを含め、ユーザーを認可URLに送信する必要があります。
認可URLの例
https://{yourDomain}/authorize?
response_type=code&
code_challenge={codeChallenge}&
code_challenge_method=S256&
client_id={yourClientId}&
redirect_uri={yourCallbackUrl}&
scope={scope}&
state={state}
Was this helpful?
パラメーター
パラメーター名 | 説明 |
---|---|
response_type |
Auth0が返す資格情報の種類を示します(code またはtoken )このフローでは、値はcode でなければなりません。 |
code_challenge |
code_verifier から生成されたチャレンジ。 |
code_challenge_method |
チャレンジを生成するために使用されるメソッド(例、S256)。PKCE仕様はS256 とplain の2つのメソッドを定義します。S256 はこの例で使用されておりAuth0がサポートしている唯一のものであるため、plain は推奨されていません。 |
client_id |
アプリケーションのクライアントID。これは、アプリケーション設定で見つけることができます)。 |
redirect_uri |
認可がユーザーにより付与された後にAuth0がブラウザをリダイレクトするURL。認可コードは、code URLパラメーターで利用できます。アプリケーション設定で有効なコールバックURLとしてこのURLを指定する必要があります。 警告: OAuth 2.0の仕様に従って、Auth0はハッシュの後、すべてを削除し、フラグメントを受け付けません。 |
scope |
返したいクレーム(またはユーザー属性)を決定する、認可を要求したいスコープを指定します。スペースで区切る必要があります。応答でIDトークンを取るには、少なくともopenid のスコープを指定する必要があります。ユーザーのフルプロファイルを返したい場合は、openid profile を要求できます。email などのユーザーに関する標準OpenID Connect(OIDC)スコープまたは名前空間形式に従ったカスタムクレームを要求できます。offline_access を含めてリフレッシュトークンを取得できます(Allow Offline Access(オフラインアクセスの許可)フィールドがアプリケーション設定で有効になっていることを確認してください)。 |
state |
(推奨)Auth0がリダイレクトしてアプリケーションに戻る際に含まれ、アプリが初期要求に追加する不透明な任意の英数字の文字列。クロスサイトリクエストフォージェリ(CSRF)攻撃を防止するためにこの値を使用する方法については、状態パラメーターを使ってCSRF攻撃を軽減するをご覧ください。 |
connection |
(任意)特定の接続でユーザーにサインインを強制します。たとえば、github の値を渡して、GitHubアカウントでログインするようにユーザーを直接GitHubに送信します。指定しなかった場合、ユーザーには、構成された接続すべてが表示されたAuth0 Lock画面が表示されます。アプリケーションの**Connections(接続)**タブで構成された接続のリストを確認できます。 |
organization |
(任意)ユーザーを認証する時に使用する組織のID。提供されない場合、アプリケーションは**Display Organization Prompt(組織のプロンプトを表示)**に設定され、ユーザーは、認証時に組織名を入力できます。 |
invitation |
(任意)組織の招待のチケットID。Organizationにメンバーを招待する場合、ユーザーが招待を受け入れたとき、アプリケーションは、invitation およびorganization のキー/値ペアを転送することで、招待の受け入れを処理する必要があります。 |
たとえば、アプリにログインを追加する際の認可URLのHTMLスニペットは、以下のようになります。
<a href="https://{yourDomain}/authorize?
response_type=code&
code_challenge=E9Melhoa2OwvFrEMTJguCHaoeK1t8URWbuGJSstw-cM&
code_challenge_method=S256&
client_id={yourClientId}&
redirect_uri={yourCallbackUrl}&
scope=openid%20profile&
state=xyzABC123">
Sign In
</a>
Was this helpful?
Response (レスポンス)
すべてが成功すると、HTTP 302
応答を受け取ります。認可コードはURLの末尾に含まれます:
HTTP/1.1 302 Found
Location: {yourCallbackUrl}?code={authorizationCode}&state=xyzABC123
Was this helpful?
トークンを要求する
authorization_code
とcode_verifier
をトークンと交換します。
取得した認可コードは、トークンと交換する必要があります。前の手順で抽出した認可コード(code
)を使用して、code_verifier
とともに送信するトークンURLにPOST
する必要があります。
トークンURLへのPOSTの例
curl --request POST \
--url 'https://{yourDomain}/oauth/token' \
--header 'content-type: application/x-www-form-urlencoded' \
--data grant_type=authorization_code \
--data 'client_id={yourClientId}' \
--data 'code_verifier={yourGeneratedCodeVerifier}' \
--data 'code={yourAuthorizationCode}' \
--data 'redirect_uri={https://yourApp/callback}'
Was this helpful?
var client = new RestClient("https://{yourDomain}/oauth/token");
var request = new RestRequest(Method.POST);
request.AddHeader("content-type", "application/x-www-form-urlencoded");
request.AddParameter("application/x-www-form-urlencoded", "grant_type=authorization_code&client_id={yourClientId}&code_verifier=%7ByourGeneratedCodeVerifier%7D&code=%7ByourAuthorizationCode%7D&redirect_uri={https://yourApp/callback}", ParameterType.RequestBody);
IRestResponse response = client.Execute(request);
Was this helpful?
package main
import (
"fmt"
"strings"
"net/http"
"io/ioutil"
)
func main() {
url := "https://{yourDomain}/oauth/token"
payload := strings.NewReader("grant_type=authorization_code&client_id={yourClientId}&code_verifier=%7ByourGeneratedCodeVerifier%7D&code=%7ByourAuthorizationCode%7D&redirect_uri={https://yourApp/callback}")
req, _ := http.NewRequest("POST", url, payload)
req.Header.Add("content-type", "application/x-www-form-urlencoded")
res, _ := http.DefaultClient.Do(req)
defer res.Body.Close()
body, _ := ioutil.ReadAll(res.Body)
fmt.Println(res)
fmt.Println(string(body))
}
Was this helpful?
HttpResponse<String> response = Unirest.post("https://{yourDomain}/oauth/token")
.header("content-type", "application/x-www-form-urlencoded")
.body("grant_type=authorization_code&client_id={yourClientId}&code_verifier=%7ByourGeneratedCodeVerifier%7D&code=%7ByourAuthorizationCode%7D&redirect_uri={https://yourApp/callback}")
.asString();
Was this helpful?
var axios = require("axios").default;
var options = {
method: 'POST',
url: 'https://{yourDomain}/oauth/token',
headers: {'content-type': 'application/x-www-form-urlencoded'},
data: new URLSearchParams({
grant_type: 'authorization_code',
client_id: '{yourClientId}',
code_verifier: '{yourGeneratedCodeVerifier}',
code: '{yourAuthorizationCode}',
redirect_uri: '{https://yourApp/callback}'
})
};
axios.request(options).then(function (response) {
console.log(response.data);
}).catch(function (error) {
console.error(error);
});
Was this helpful?
#import <Foundation/Foundation.h>
NSDictionary *headers = @{ @"content-type": @"application/x-www-form-urlencoded" };
NSMutableData *postData = [[NSMutableData alloc] initWithData:[@"grant_type=authorization_code" dataUsingEncoding:NSUTF8StringEncoding]];
[postData appendData:[@"&client_id={yourClientId}" dataUsingEncoding:NSUTF8StringEncoding]];
[postData appendData:[@"&code_verifier={yourGeneratedCodeVerifier}" dataUsingEncoding:NSUTF8StringEncoding]];
[postData appendData:[@"&code={yourAuthorizationCode}" dataUsingEncoding:NSUTF8StringEncoding]];
[postData appendData:[@"&redirect_uri={https://yourApp/callback}" dataUsingEncoding:NSUTF8StringEncoding]];
NSMutableURLRequest *request = [NSMutableURLRequest requestWithURL:[NSURL URLWithString:@"https://{yourDomain}/oauth/token"]
cachePolicy:NSURLRequestUseProtocolCachePolicy
timeoutInterval:10.0];
[request setHTTPMethod:@"POST"];
[request setAllHTTPHeaderFields:headers];
[request setHTTPBody:postData];
NSURLSession *session = [NSURLSession sharedSession];
NSURLSessionDataTask *dataTask = [session dataTaskWithRequest:request
completionHandler:^(NSData *data, NSURLResponse *response, NSError *error) {
if (error) {
NSLog(@"%@", error);
} else {
NSHTTPURLResponse *httpResponse = (NSHTTPURLResponse *) response;
NSLog(@"%@", httpResponse);
}
}];
[dataTask resume];
Was this helpful?
$curl = curl_init();
curl_setopt_array($curl, [
CURLOPT_URL => "https://{yourDomain}/oauth/token",
CURLOPT_RETURNTRANSFER => true,
CURLOPT_ENCODING => "",
CURLOPT_MAXREDIRS => 10,
CURLOPT_TIMEOUT => 30,
CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
CURLOPT_CUSTOMREQUEST => "POST",
CURLOPT_POSTFIELDS => "grant_type=authorization_code&client_id={yourClientId}&code_verifier=%7ByourGeneratedCodeVerifier%7D&code=%7ByourAuthorizationCode%7D&redirect_uri={https://yourApp/callback}",
CURLOPT_HTTPHEADER => [
"content-type: application/x-www-form-urlencoded"
],
]);
$response = curl_exec($curl);
$err = curl_error($curl);
curl_close($curl);
if ($err) {
echo "cURL Error #:" . $err;
} else {
echo $response;
}
Was this helpful?
import http.client
conn = http.client.HTTPSConnection("")
payload = "grant_type=authorization_code&client_id={yourClientId}&code_verifier=%7ByourGeneratedCodeVerifier%7D&code=%7ByourAuthorizationCode%7D&redirect_uri={https://yourApp/callback}"
headers = { 'content-type': "application/x-www-form-urlencoded" }
conn.request("POST", "/{yourDomain}/oauth/token", payload, headers)
res = conn.getresponse()
data = res.read()
print(data.decode("utf-8"))
Was this helpful?
require 'uri'
require 'net/http'
require 'openssl'
url = URI("https://{yourDomain}/oauth/token")
http = Net::HTTP.new(url.host, url.port)
http.use_ssl = true
http.verify_mode = OpenSSL::SSL::VERIFY_NONE
request = Net::HTTP::Post.new(url)
request["content-type"] = 'application/x-www-form-urlencoded'
request.body = "grant_type=authorization_code&client_id={yourClientId}&code_verifier=%7ByourGeneratedCodeVerifier%7D&code=%7ByourAuthorizationCode%7D&redirect_uri={https://yourApp/callback}"
response = http.request(request)
puts response.read_body
Was this helpful?
import Foundation
let headers = ["content-type": "application/x-www-form-urlencoded"]
let postData = NSMutableData(data: "grant_type=authorization_code".data(using: String.Encoding.utf8)!)
postData.append("&client_id={yourClientId}".data(using: String.Encoding.utf8)!)
postData.append("&code_verifier={yourGeneratedCodeVerifier}".data(using: String.Encoding.utf8)!)
postData.append("&code={yourAuthorizationCode}".data(using: String.Encoding.utf8)!)
postData.append("&redirect_uri={https://yourApp/callback}".data(using: String.Encoding.utf8)!)
let request = NSMutableURLRequest(url: NSURL(string: "https://{yourDomain}/oauth/token")! as URL,
cachePolicy: .useProtocolCachePolicy,
timeoutInterval: 10.0)
request.httpMethod = "POST"
request.allHTTPHeaderFields = headers
request.httpBody = postData as Data
let session = URLSession.shared
let dataTask = session.dataTask(with: request as URLRequest, completionHandler: { (data, response, error) -> Void in
if (error != nil) {
print(error)
} else {
let httpResponse = response as? HTTPURLResponse
print(httpResponse)
}
})
dataTask.resume()
Was this helpful?
パラメーター
パラメーター | 説明 |
---|---|
grant_type |
これをauthorization_code に設定します。 |
code_verifier |
暗号的にランダムなキーです。このチュートリアルの最初の手順で生成しました。 |
code |
このチュートリアルの前の手順で取得したauthorization_code です。 |
client_id |
アプリケーションのクライアントIDです。この値は[Application Settings(アプリケーションの設定)]にあります。 |
redirect_uri |
アプリケーションの設定で指定されている有効なコールバックURLです。このチュートリアルの前の手順で認可URLに渡されたredirect_uri と完全に一致しなければなりません。これは、URLエンコードする必要があります。 |
Response (レスポンス)
すべてが成功すると、access_token
、refresh_token
、id_token
、およびtoken_type
の値を含むペイロードとともに、HTTP 200の応答を受信します。
{
"access_token":"eyJz93a...k4laUWw",
"refresh_token":"GEbRxBN...edjnXbL",
"id_token":"eyJ0XAi...4faeEoQ",
"token_type":"Bearer",
"expires_in":86400
}
Was this helpful?
IDトークンには、デコードして抽出する必要があるユーザー情報が含まれています。
アクセストークンは、Auth0認証APIの/userinfoエンドポイントまたは別のAPIを呼び出すために使用されます。独自のAPIを呼び出す場合にAPIが最初に行うのは、アクセストークンを検証することです。
リフレッシュトークンは、アクセストークンまたはIDトークンの期限が切れたときに、新しいトークンの取得に使用されます。refresh_token
は、offline_access
スコープを含め、DashboardでAPIの[Allow Offline Access(オフラインアクセスの許可)]を有効にした場合にのみ、応答内に表示されます。
ユースケース
基本的な認証要求
この例では、手順1でユーザーを認可する際に行う最も基本的な要求について説明します。Auth0のログイン画面を表示して、構成されている接続でユーザーがサインインできるようにします。
https://{yourDomain}/authorize?
response_type=code&
code_challenge={codeChallenge}&
code_challenge_method=S256&
client_id={yourClientId}&
redirect_uri={yourCallbackUrl}&
scope=openid
Was this helpful?
トークンを要求する際に、IDトークンには最も基本的なクレームが含まれます。IDトークンをデコードする際には、以下のようになります。
{
"iss": "https://auth0pnp.auth0.com/",
"sub": "auth0|581...",
"aud": "xvt9...",
"exp": 1478112929,
"iat": 1478076929
}
Was this helpful?
ユーザーの名前とプロファイルの写真を要求する
通常のユーザー認証に加えて、この例では名前や写真など、追加のユーザー詳細情報を要求する方法について説明します。
ユーザーの名前や写真を要求するには、ユーザーを認可する際に、適切なスコープを追加する必要があります。
https://{yourDomain}/authorize?
response_type=code&
code_challenge={codeChallenge}&
code_challenge_method=S256&
client_id={yourClientId}&
redirect_uri={yourCallbackUrl}&
scope=openid%20name%20picture&
state={state}
Was this helpful?
トークンを要求する際に、IDトークンには要求された名前と写真のクレームが含まれます。IDトークンをデコードする際には、以下のようになります。
{
"name": "auth0user@...",
"picture": "https://example.com/profile-pic.png",
"iss": "https://auth0user.auth0.com/",
"sub": "auth0|581...",
"aud": "xvt...",
"exp": 1478113129,
"iat": 1478077129
}
Was this helpful?
GitHubでのユーザーログインを要求する
通常のユーザー認証に加えて、この例では、ユーザーをGitHubなどのソーシャルIDプロバイダーへ直接送る方法について説明します。この例を利用するには、[Auth0 Dashboard] > [Authentication(認証)] > [Social(ソーシャル)]に移動して、適切な接続を構成する必要があります。[Settings(設定)]タブから接続名を取得します。
ユーザーをGitHubのログイン画面へ直接送るには、connection
パラメーターを渡して、ユーザー認可時にその値を接続名(この場合はgithub
)に設定します。
https://{yourDomain}/authorize?
response_type=code&
code_challenge={codeChallenge}&
code_challenge_method=S256&
client_id={yourClientId}&
redirect_uri={yourCallbackUrl}&
scope=openid%20name%20picture&
state={state}&
connection=github
Was this helpful?
トークンを要求する際に、IDトークンにはGitHubから返されたユーザーの一意のIDを含むsub
クレームが含まれます。IDトークンをデコードする際には、以下のようになります。
{
"name": "John Smith",
"picture": "https://avatars.example.com",
"email": "jsmith@...",
"email_verified": true,
"iss": "https://auth0user.auth0.com/",
"sub": "github|100...",
"aud": "xvt...",
"exp": 1478114742,
"iat": 1478078742
}
Was this helpful?