From 45fa81ea946ee823f7b5140fb9ca460b69026fdf Mon Sep 17 00:00:00 2001 From: Harish Sundar Date: Fri, 9 May 2025 18:47:45 +0530 Subject: [PATCH] updating quickstarts from contentful --- .../quickstart/backend/acul/interactive.md | 12 +- .../backend/aspnet-core-webapi/interactive.md | 610 ++++++++++++++++-- .../quickstart/backend/django/interactive.md | 41 +- .../quickstart/backend/golang/interactive.md | 32 +- .../java-spring-security5/interactive.md | 31 +- .../quickstart/backend/laravel/interactive.md | 18 +- .../quickstart/backend/nodejs/interactive.md | 280 +++++++- .../quickstart/backend/php/interactive.md | 8 +- .../backend/python/01-authorization.md | 35 +- .../quickstart/backend/python/interactive.md | 280 +++++++- .../quickstart/backend/rails/interactive.md | 286 +++++++- .../backend/webapi-owin/interactive.md | 8 +- .../android-facebook-login/interactive.md | 8 +- .../quickstart/native/android/00-login.md | 2 +- .../quickstart/native/android/interactive.md | 91 +-- .../quickstart/native/device/interactive.md | 40 +- .../quickstart/native/flutter/01-login.md | 5 +- .../flutter/_configure_urls_interactive.md | 5 +- .../quickstart/native/flutter/interactive.md | 45 +- .../native/ionic-angular/interactive.md | 41 +- .../native/ionic-react/interactive.md | 45 +- .../native/ionic-vue/interactive.md | 47 +- .../quickstart/native/ios-swift/01-login.md | 2 - .../native/ios-swift/interactive.md | 139 +--- .../quickstart/native/maui/interactive.md | 58 +- .../native/net-android-ios/interactive.md | 14 +- .../native/react-native-expo/interactive.md | 18 +- .../native/react-native/interactive.md | 24 +- .../native/windows-uwp-csharp/interactive.md | 2 +- .../native/wpf-winforms/interactive.md | 18 +- .../quickstart/spa/angular/interactive.md | 22 +- .../quickstart/spa/flutter/interactive.md | 16 +- articles/quickstart/spa/react/interactive.md | 24 +- .../quickstart/spa/vanillajs/interactive.md | 20 +- articles/quickstart/spa/vuejs/interactive.md | 20 +- .../quickstart/webapp/apache/interactive.md | 4 +- .../aspnet-core-blazor-server/interactive.md | 12 +- .../webapp/aspnet-core/interactive.md | 12 +- .../webapp/aspnet-owin/interactive.md | 12 +- .../quickstart/webapp/django/interactive.md | 12 +- .../quickstart/webapp/express/interactive.md | 38 +- .../quickstart/webapp/golang/interactive.md | 12 +- .../quickstart/webapp/java-ee/interactive.md | 22 +- .../webapp/java-spring-boot/interactive.md | 18 +- .../quickstart/webapp/java/interactive.md | 42 +- .../quickstart/webapp/laravel/interactive.md | 214 +++++- articles/quickstart/webapp/nextjs/01-login.md | 200 +++--- articles/quickstart/webapp/nextjs/download.md | 2 +- .../quickstart/webapp/nextjs/files/.env.md | 2 +- articles/quickstart/webapp/nextjs/index.yml | 2 +- .../quickstart/webapp/nextjs/interactive.md | 17 +- .../webapp/nginx-plus/interactive.md | 4 +- articles/quickstart/webapp/php/interactive.md | 18 +- .../quickstart/webapp/python/interactive.md | 12 +- .../quickstart/webapp/rails/interactive.md | 21 +- .../quickstart/backend/acul/interactive.md | 18 +- .../backend/aspnet-core-webapi/interactive.md | 72 +-- .../quickstart/backend/django/interactive.md | 32 +- .../quickstart/backend/golang/interactive.md | 38 +- .../java-spring-security5/interactive.md | 18 +- .../quickstart/backend/laravel/interactive.md | 42 +- .../quickstart/backend/nodejs/interactive.md | 290 ++++++++- .../quickstart/backend/php/interactive.md | 22 +- .../quickstart/backend/python/interactive.md | 280 +++++++- .../quickstart/backend/rails/interactive.md | 294 ++++++++- .../backend/webapi-owin/interactive.md | 22 +- .../android-facebook-login/interactive.md | 32 +- .../quickstart/native/android/interactive.md | 26 +- .../quickstart/native/device/interactive.md | 56 +- .../quickstart/native/flutter/interactive.md | 34 +- .../native/ionic-angular/interactive.md | 36 +- .../native/ionic-react/interactive.md | 36 +- .../native/ionic-vue/interactive.md | 34 +- .../native/ios-swift/interactive.md | 34 +- .../quickstart/native/maui/interactive.md | 76 ++- .../native/net-android-ios/interactive.md | 36 +- .../native/react-native-expo/files/app.md | 74 ++- .../native/react-native-expo/interactive.md | 34 +- .../native/react-native/interactive.md | 40 +- .../native/windows-uwp-csharp/interactive.md | 2 +- .../native/wpf-winforms/interactive.md | 28 +- .../quickstart/spa/angular/interactive.md | 26 +- .../quickstart/spa/flutter/interactive.md | 30 +- .../quickstart/spa/react/interactive.md | 30 +- .../quickstart/spa/vanillajs/interactive.md | 32 +- .../quickstart/spa/vuejs/interactive.md | 28 +- .../quickstart/webapp/apache/interactive.md | 12 +- .../aspnet-core-blazor-server/interactive.md | 26 +- .../webapp/aspnet-core/interactive.md | 30 +- .../webapp/aspnet-owin/interactive.md | 26 +- .../quickstart/webapp/django/interactive.md | 32 +- .../quickstart/webapp/express/interactive.md | 20 +- .../quickstart/webapp/golang/interactive.md | 42 +- .../quickstart/webapp/java-ee/interactive.md | 22 +- .../webapp/java-spring-boot/interactive.md | 30 +- .../quickstart/webapp/java/interactive.md | 28 +- .../quickstart/webapp/laravel/interactive.md | 194 +++++- .../quickstart/webapp/nextjs/files/.env.md | 2 +- .../quickstart/webapp/nextjs/interactive.md | 22 +- .../webapp/nginx-plus/interactive.md | 20 +- .../quickstart/webapp/php/interactive.md | 24 +- .../quickstart/webapp/python/interactive.md | 30 +- .../quickstart/webapp/rails/interactive.md | 38 +- .../quickstart/backend/acul/interactive.md | 18 +- .../backend/aspnet-core-webapi/interactive.md | 56 +- .../quickstart/backend/django/interactive.md | 32 +- .../quickstart/backend/golang/interactive.md | 34 +- .../java-spring-security5/interactive.md | 30 +- .../quickstart/backend/laravel/interactive.md | 22 +- .../quickstart/backend/nodejs/interactive.md | 280 +++++++- .../quickstart/backend/php/interactive.md | 14 +- .../quickstart/backend/python/interactive.md | 280 +++++++- .../quickstart/backend/rails/interactive.md | 284 +++++++- .../backend/webapi-owin/interactive.md | 6 +- .../android-facebook-login/interactive.md | 12 +- .../quickstart/native/android/interactive.md | 22 +- .../quickstart/native/device/interactive.md | 40 +- .../quickstart/native/flutter/interactive.md | 16 +- .../native/ionic-angular/interactive.md | 26 +- .../native/ionic-react/interactive.md | 26 +- .../native/ionic-vue/interactive.md | 28 +- .../native/ios-swift/interactive.md | 30 +- .../quickstart/native/maui/interactive.md | 58 +- .../native/net-android-ios/interactive.md | 14 +- .../native/react-native-expo/interactive.md | 18 +- .../native/react-native/interactive.md | 22 +- .../native/windows-uwp-csharp/interactive.md | 2 +- .../native/wpf-winforms/interactive.md | 18 +- .../quickstart/spa/angular/interactive.md | 22 +- .../quickstart/spa/flutter/interactive.md | 16 +- .../quickstart/spa/react/interactive.md | 24 +- .../quickstart/spa/vanillajs/interactive.md | 20 +- .../quickstart/spa/vuejs/interactive.md | 22 +- .../quickstart/webapp/apache/interactive.md | 4 +- .../aspnet-core-blazor-server/interactive.md | 12 +- .../webapp/aspnet-core/interactive.md | 12 +- .../webapp/aspnet-owin/interactive.md | 12 +- .../quickstart/webapp/django/interactive.md | 12 +- .../quickstart/webapp/express/interactive.md | 14 +- .../quickstart/webapp/golang/interactive.md | 10 +- .../quickstart/webapp/java-ee/interactive.md | 22 +- .../webapp/java-spring-boot/interactive.md | 18 +- .../quickstart/webapp/java/interactive.md | 14 +- .../quickstart/webapp/laravel/interactive.md | 214 +++++- .../quickstart/webapp/nextjs/files/.env.md | 2 +- .../quickstart/webapp/nextjs/interactive.md | 20 +- .../webapp/nginx-plus/interactive.md | 4 +- .../quickstart/webapp/php/interactive.md | 22 +- .../quickstart/webapp/python/interactive.md | 12 +- .../quickstart/webapp/rails/interactive.md | 20 +- 150 files changed, 5235 insertions(+), 2154 deletions(-) diff --git a/articles/quickstart/backend/acul/interactive.md b/articles/quickstart/backend/acul/interactive.md index 640c9b13cd..7076a33102 100644 --- a/articles/quickstart/backend/acul/interactive.md +++ b/articles/quickstart/backend/acul/interactive.md @@ -7,7 +7,7 @@ files: - files/auth_config - files/index github: - path: https://github.com/auth0-samples/auth0-react-samples/tree/master/Sample-01 + path: Sample-01 locale: en-US --- @@ -19,12 +19,12 @@ locale: en-US ## Configure Auth0 -

To use Auth0 services, you’ll need to have an application set up in the Auth0 Dashboard. The Auth0 application is where you will configure how you want authentication to work for the project you are developing.

Configure an application

Use the interactive selector to create a new Auth0 application or select an existing application that represents the project you want to integrate with. Every application in Auth0 is assigned an alphanumeric, unique client ID that your application code will use to call Auth0 APIs through the SDK.

Any settings you configure using this quickstart will automatically update for your Application in the Dashboard, which is where you can manage your Applications in the future.

If you would rather explore a complete configuration, you can view a sample application instead.

Configure Callback URLs

A callback URL is a URL in your application that you would like Auth0 to redirect users to after they have authenticated. If not set, users will not be returned to your application after they log in.

If you are following along with our sample project, set this to http://localhost:3000.

Configure Logout URLs

A logout URL is a URL in your application that you would like Auth0 to redirect users to after they have logged out. If not set, users will not be able to log out from your application and will receive an error.

If you are following along with our sample project, set this to http://localhost:3000.

Configure Allowed Web Origins

An Allowed Web Origin is a URL that you want to be allowed to access to your authentication flow. This must contain the URL of your project. If not properly set, your project will be unable to silently refresh authentication tokens, so your users will be logged out the next time they visit your application or refresh a page.

If you are following along with our sample project, set this to http://localhost:3000.

+

To use Auth0 services, you’ll need to have an application set up in the Auth0 Dashboard. The Auth0 application is where you will configure how you want authentication to work for the project you are developing.

Configure an application

Use the interactive selector to create a new Auth0 application or select an existing application that represents the project you want to integrate with. Every application in Auth0 is assigned an alphanumeric, unique client ID that your application code will use to call Auth0 APIs through the SDK.

Any settings you configure using this quickstart will automatically update for your Application in the Dashboard, which is where you can manage your Applications in the future.

If you would rather explore a complete configuration, you can view a sample application instead.

Configure Callback URLs

A callback URL is a URL in your application that you would like Auth0 to redirect users to after they have authenticated. If not set, users will not be returned to your application after they log in.

If you are following along with our sample project, set this to http://localhost:3000.

Configure Logout URLs

A logout URL is a URL in your application that you would like Auth0 to redirect users to after they have logged out. If not set, users will not be able to log out from your application and will receive an error.

If you are following along with our sample project, set this to http://localhost:3000.

Configure Allowed Web Origins

An Allowed Web Origin is a URL that you want to be allowed to access to your authentication flow. This must contain the URL of your project. If not properly set, your project will be unable to silently refresh authentication tokens, so your users will be logged out the next time they visit your application or refresh a page.

If you are following along with our sample project, set this to http://localhost:3000.

## Configure ACUL for Login ID screen {{{ data-action="code" data-code="settings.json" }}} -

Use Auth0 CLI to enable ACLU Login ID screen in your tenant. +

Use Auth0 CLI to enable ACLU Login ID screen in your tenant. @@ -55,7 +55,7 @@ npm install -

ACUL Login ID screen Step 2 - Checkpoint
  1. Open your application (default: http://localhost:3000)

  2. Select the Log In button on the sample app

  3. You should be redirected to your Auth0 domain

After selecting Log In, you should see a blank page.

This is expected! It means Auth0 is trying to load your custom UI assets, which we have not created yet.

+

ACUL Login ID screen Step 2 - Checkpoint
  1. Open your application (default: http://localhost:3000)

  2. Select the Log In button on the sample app

  3. You should be redirected to your Auth0 domain

After selecting Log In, you should see a blank page.

This is expected! It means Auth0 is trying to load your custom UI assets, which we have not created yet.

@@ -76,7 +76,7 @@ npm install -

2. Change directory to the auth0-acul-react-boilerplate folder and install the application and the ACUL JS SDK.

// open the directory where you git clone the boilerplate
+

2. Change directory to the auth0-acul-react-boilerplate folder and install the application and the ACUL JS SDK.

// open the directory where you git clone the boilerplate
 
 cd auth0-acul-react-boilerplate && npm i
 
@@ -100,7 +100,7 @@ npm install @auth0/auth0-acul-js
 
   
-

Make sure to have installed the ACUL JS SDK after installing the boilerplate application.

+

Make sure to have installed the ACUL JS SDK after installing the boilerplate application.

Build the ACUL Login ID screen

Change directory to the auth0-acul-react-boilerplate/src/screens/loginId/ and edit the index.tsx file.

Rebuild the application with the following command:

npm run build
 
diff --git a/articles/quickstart/backend/aspnet-core-webapi/interactive.md b/articles/quickstart/backend/aspnet-core-webapi/interactive.md
index 3c88df47b9..8b881c804e 100644
--- a/articles/quickstart/backend/aspnet-core-webapi/interactive.md
+++ b/articles/quickstart/backend/aspnet-core-webapi/interactive.md
@@ -9,7 +9,7 @@ files:
  - files/HasScopeRequirement
  - files/ApiController
 github:
-  path: https://github.com/auth0-samples/auth0-aspnetcore-webapi-samples/tree/master/Quickstart/01-Authorization
+  path: Quickstart/01-Authorization
 locale: en-US
 ---
 
@@ -21,7 +21,7 @@ locale: en-US
 ## Define permissions
 
 
-

Permissions let you define how resources can be accessed on behalf of the user with a given access token. For example, you might choose to grant read access to the messages resource if users have the manager access level, and grant write access to that resource if they have the administrator access level.

You can define allowed permissions in the Permissions view of the Auth0 Dashboard's APIs section. The following example uses the read:messages scope.

Auth0 Dashboard> Applications > APIs > [Specific API] > Permissions tab

+

Permissions let you define how resources can be accessed on behalf of the user with a given access token. For example, you might choose to grant read access to the messages resource if users have the manager access level, and grant write access to that resource if they have the administrator access level.

You can define allowed permissions in the Permissions view of the Auth0 Dashboard's APIs section. The following example uses the read:messages scope.

Auth0 Dashboard> Applications > APIs > [Specific API] > Permissions tab

## Install dependencies @@ -42,100 +42,572 @@ locale: en-US ## Validate scopes {{{ data-action="code" data-code="HasScopeHandler.cs" }}} -

To ensure that an access token contains the correct scopes, use Policy-Based Authorization in the ASP.NET Core:

  1. Create a new authorization requirement called HasScopeRequirement, which will check whether the scope claim issued by your Auth0 tenant is present, and if so, will check that the claim contains the requested scope.

  2. Under your Program.cs file's var builder = WebApplication.CreateBuilder(args); method, add a call to the app.AddAuthorization method.

  3. Add policies for scopes by calling AddPolicy for each scope.

  4. Register a singleton for the HasScopeHandler class.

+

To ensure that an access token contains the correct scopes, use Policy-Based Authorization in the ASP.NET Core:

  1. Create a new authorization requirement called HasScopeRequirement, which will check whether the scope claim issued by your Auth0 tenant is present, and if so, will check that the claim contains the requested scope.

  2. Under your Program.cs file's var builder = WebApplication.CreateBuilder(args); method, add a call to the app.AddAuthorization method.

  3. Add policies for scopes by calling AddPolicy for each scope.

  4. Register a singleton for the HasScopeHandler class.

## Protect API endpoints {{{ data-action="code" data-code="ApiController.cs" }}} -

The JWT middleware integrates with the standard ASP.NET Core Authentication and Authorization mechanisms.

To secure an endpoint, add the [Authorize] attribute to your controller action (or the entire controller if you want to protect all of its actions).

When securing endpoints that require specific scopes, make sure that the correct scope is present in the access_token. To do so, add the Authorize attribute to the Scoped action and pass read:messages as the policy parameter.

+

The JWT middleware integrates with the standard ASP.NET Core Authentication and Authorization mechanisms.

To secure an endpoint, add the [Authorize] attribute to your controller action (or the entire controller if you want to protect all of its actions).

When securing endpoints that require specific scopes, make sure that the correct scope is present in the access_token. To do so, add the Authorize attribute to the Scoped action and pass read:messages as the policy parameter.

## Call your API -The way in which you call your API depends on the type of application you are developing and the framework you are using. To learn more, read the relevant application Quickstart: -* Single-Page Applications -* Mobile / Native Application +

The way in which you call your API depends on the type of application you are developing and the framework you are using. To learn more, read the relevant application Quickstart:

Get an access token

Regardless of the type of application you are developing or the framework you are using, to call your API, you need an access token.

If you call your API from a Single-Page Application (SPA) or Native application, you will receive an access token after the authorization flow completes.

If you call the API from a command-line tool or other service where a user entering credentials does not exist, use the OAuth Client Credentials Flow. To do so, register a Machine-to-Machine Application and pass the following values in your request:

  • Client ID as the client_id parameter.

  • Client Secret as the client_secret parameter.

  • API Identifier (the same value used to configure the middleware earlier in this quickstart) as the audience parameter.

To learn more about getting the Client ID and Client Secret for your machine-to-machine application, read Application Settings.

Example request


 
-### Get an access token
+
-Regardless of the type of application you are developing or the framework you are using, to call your API, you need an access token. + -If you are calling your API from a Single-Page Application (SPA) or a Native application, after the authorization flow completes, you will get an access token. -If you are calling the API from a command-line tool or another service where a user entering credentials does not exist, use the OAuth Client Credentials Flow. To do so, register a Machine-to-Machine Application, and pass in the **Client ID** as the `client_id` parameter, the **Client Secret** as the `client_secret` parameter, and the API Identifier (the same value you used to configure the middleware earlier in this quickstart) as the `audience` parameter when making the following request: -:::note -To learn more about getting the Client ID and Client Secret for your machine-to-machine application, read Application Settings. -::: + + +
curl --request post \
+
+  --url 'https://${account.namespace}/oauth/token' \
+
+  --header 'content-type: application/x-www-form-urlencoded'
var client = new RestClient("https://${account.namespace}/oauth/token");
+
+var request = new RestRequest(Method.POST);
+
+request.AddHeader("content-type", "application/x-www-form-urlencoded");
+
+IRestResponse response = client.Execute(request);
package main
+
+
+
+import (
+
+ "fmt"
+
+ "net/http"
+
+ "io/ioutil"
+
+)
+
+
+
+func main() {
+
+
+
+ url := "https://${account.namespace}/oauth/token"
+
+
+
+ req, _ := http.NewRequest("post", url, nil)
+
+
+
+ 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))
+
+
+
+}
HttpResponse<String> response = Unirest.post("https://${account.namespace}/oauth/token")
+
+  .header("content-type", "application/x-www-form-urlencoded")
+
+  .asString();
var axios = require("axios").default;
+
+
+
+var options = {
+
+  method: 'post',
+
+  url: 'https://${account.namespace}/oauth/token',
+
+  headers: {'content-type': 'application/x-www-form-urlencoded'}
+
+};
+
+
+
+axios.request(options).then(function (response) {
+
+  console.log(response.data);
+
+}).catch(function (error) {
+
+  console.error(error);
+
+});
#import <Foundation/Foundation.h>
+
+
+
+NSDictionary *headers = @{ @"content-type": @"application/x-www-form-urlencoded" };
+
+
+
+NSMutableURLRequest *request = [NSMutableURLRequest requestWithURL:[NSURL URLWithString:@"https://${account.namespace}/oauth/token"]
+
+                                                       cachePolicy:NSURLRequestUseProtocolCachePolicy
+
+                                                   timeoutInterval:10.0];
+
+[request setHTTPMethod:@"post"];
+
+[request setAllHTTPHeaderFields:headers];
+
+
+
+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];
$curl = curl_init();
+
+
+
+curl_setopt_array($curl, [
+
+  CURLOPT_URL => "https://${account.namespace}/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_HTTPHEADER => [
+
+    "content-type: application/x-www-form-urlencoded"
 
-```har
-{
-  "method": "POST",
-  "url": "https://${account.namespace}/oauth/token",
-  "headers": [
-    { "name": "Content-Type", "value": "application/x-www-form-urlencoded" }
   ],
-  "postData": {
-    "mimeType": "application/x-www-form-urlencoded",
-    "params": [
-      {
-        "name": "grant_type",
-        "value": "client_credentials"
-      },
-      {
-        "name": "client_id",
-        "value": "${account.clientId}"
-      },
-      {
-        "name": "client_secret",
-        "value": "YOUR_CLIENT_SECRET"
-      },
-      {
-        "name": "audience",
-        "value": "${apiIdentifier}"
-      }
-    ]
+
+]);
+
+
+
+$response = curl_exec($curl);
+
+$err = curl_error($curl);
+
+
+
+curl_close($curl);
+
+
+
+if ($err) {
+
+  echo "cURL Error #:" . $err;
+
+} else {
+
+  echo $response;
+
+}
import http.client
+
+
+
+conn = http.client.HTTPSConnection("")
+
+
+
+headers = { 'content-type': "application/x-www-form-urlencoded" }
+
+
+
+conn.request("post", "/${account.namespace}/oauth/token", headers=headers)
+
+
+
+res = conn.getresponse()
+
+data = res.read()
+
+
+
+print(data.decode("utf-8"))
require 'uri'
+
+require 'net/http'
+
+require 'openssl'
+
+
+
+url = URI("https://${account.namespace}/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'
+
+
+
+response = http.request(request)
+
+puts response.read_body
import Foundation
+
+
+
+let headers = ["content-type": "application/x-www-form-urlencoded"]
+
+
+
+let request = NSMutableURLRequest(url: NSURL(string: "https://${account.namespace}/oauth/token")! as URL,
+
+                                        cachePolicy: .useProtocolCachePolicy,
+
+                                    timeoutInterval: 10.0)
+
+request.httpMethod = "post"
+
+request.allHTTPHeaderFields = headers
+
+
+
+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)
+
   }
-}
-```
 
-### Call a secure endpoint
+})
+
+
+
+dataTask.resume()
+ + -Now that you have an access token, you can use it to call secure API endpoints. When calling a secure endpoint, you must include the access token as a Bearer token in the **Authorization** header of the request. For example, you can make a request to the `/api/private` endpoint: +

Call a secure endpoint

Now that you have an access token, you can use it to call secure API endpoints. When calling a secure endpoint, you must include the access token as a Bearer token in the Authorization header of the request. For example, you can make a request to the /api/private endpoint:


 
-```har
-{
-  "method": "GET",
-  "url": "http://localhost:3010/api/private",
-  "headers": [
-    { "name": "Authorization", "value": "Bearer YOUR_ACCESS_TOKEN" }
-  ]
-}
-```
+
-Call the `/api/private-scoped` endpoint in a similar way, but ensure that the API permissions are configured correctly and that the access token includes the `read:messages` scope. + + + + + + +
curl --request get \
+
+  --url http://localhost:3010/api/private \
+
+  --header 'authorization: Bearer YOUR_ACCESS_TOKEN'
var client = new RestClient("http://localhost:3010/api/private");
+
+var request = new RestRequest(Method.GET);
+
+request.AddHeader("authorization", "Bearer YOUR_ACCESS_TOKEN");
+
+IRestResponse response = client.Execute(request);
package main
+
+
+
+import (
+
+ "fmt"
+
+ "net/http"
+
+ "io/ioutil"
+
+)
+
+
+
+func main() {
+
+
+
+ url := "http://localhost:3010/api/private"
+
+
+
+ req, _ := http.NewRequest("get", url, nil)
+
+
+
+ req.Header.Add("authorization", "Bearer YOUR_ACCESS_TOKEN")
+
+
+
+ res, _ := http.DefaultClient.Do(req)
+
+
+
+ defer res.Body.Close()
+
+ body, _ := ioutil.ReadAll(res.Body)
+
+
+
+ fmt.Println(res)
+
+ fmt.Println(string(body))
+
+
+
+}
HttpResponse<String> response = Unirest.get("http://localhost:3010/api/private")
+
+  .header("authorization", "Bearer YOUR_ACCESS_TOKEN")
+
+  .asString();
var axios = require("axios").default;
+
+
+
+var options = {
+
+  method: 'get',
+
+  url: 'http://localhost:3010/api/private',
+
+  headers: {authorization: 'Bearer YOUR_ACCESS_TOKEN'}
+
+};
+
+
+
+axios.request(options).then(function (response) {
+
+  console.log(response.data);
+
+}).catch(function (error) {
+
+  console.error(error);
+
+});
#import <Foundation/Foundation.h>
+
+
+
+NSDictionary *headers = @{ @"authorization": @"Bearer YOUR_ACCESS_TOKEN" };
+
+
+
+NSMutableURLRequest *request = [NSMutableURLRequest requestWithURL:[NSURL URLWithString:@"http://localhost:3010/api/private"]
+
+                                                       cachePolicy:NSURLRequestUseProtocolCachePolicy
+
+                                                   timeoutInterval:10.0];
+
+[request setHTTPMethod:@"get"];
+
+[request setAllHTTPHeaderFields:headers];
+
+
+
+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];
$curl = curl_init();
+
+
+
+curl_setopt_array($curl, [
+
+  CURLOPT_PORT => "3010",
+
+  CURLOPT_URL => "http://localhost:3010/api/private",
+
+  CURLOPT_RETURNTRANSFER => true,
+
+  CURLOPT_ENCODING => "",
+
+  CURLOPT_MAXREDIRS => 10,
+
+  CURLOPT_TIMEOUT => 30,
+
+  CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
+
+  CURLOPT_CUSTOMREQUEST => "get",
+
+  CURLOPT_HTTPHEADER => [
+
+    "authorization: Bearer YOUR_ACCESS_TOKEN"
+
+  ],
+
+]);
+
+
+
+$response = curl_exec($curl);
+
+$err = curl_error($curl);
+
+
+
+curl_close($curl);
+
+
+
+if ($err) {
+
+  echo "cURL Error #:" . $err;
+
+} else {
+
+  echo $response;
+
+}
import http.client
+
+
+
+conn = http.client.HTTPConnection("localhost:3010")
+
+
+
+headers = { 'authorization': "Bearer YOUR_ACCESS_TOKEN" }
+
+
+
+conn.request("get", "/api/private", headers=headers)
+
+
+
+res = conn.getresponse()
+
+data = res.read()
+
+
+
+print(data.decode("utf-8"))
require 'uri'
+
+require 'net/http'
+
+
+
+url = URI("http://localhost:3010/api/private")
+
+
+
+http = Net::HTTP.new(url.host, url.port)
+
+
+
+request = Net::HTTP::Get.new(url)
+
+request["authorization"] = 'Bearer YOUR_ACCESS_TOKEN'
+
+
+
+response = http.request(request)
+
+puts response.read_body
import Foundation
+
+
+
+let headers = ["authorization": "Bearer YOUR_ACCESS_TOKEN"]
+
+
+
+let request = NSMutableURLRequest(url: NSURL(string: "http://localhost:3010/api/private")! as URL,
+
+                                        cachePolicy: .useProtocolCachePolicy,
+
+                                    timeoutInterval: 10.0)
+
+request.httpMethod = "get"
+
+request.allHTTPHeaderFields = headers
+
+
+
+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)
+
+  }
 
-::::checkpoint
+})
 
-:::checkpoint-default
-You should now be able to call the `/api/private` and `/api/private-scoped` endpoints. 
 
-Run your application, and verify that:
 
-- `GET /api/private` is available for authenticated requests.
-- `GET /api/private-scoped` is available for authenticated requests containing an access token with the `read:messages` scope.
+dataTask.resume()
-::: -:::checkpoint-failure -Sorry about that. Here are a few things to double check: -- make sure `ValidIssuer` and `ValidAudience` are configured correctly -- make sure the token is added as the `Authorization` header -- check that the token has the correct scopes (you can use jwt.io to verify) +

Call the /api/private-scoped endpoint in a similar way, but ensure that the API permissions are configured correctly and that the access token includes the read:messages scope.

ASP.NET API Quickstart - Step 6 Checkpoint

You should now be able to call the /api/private and /api/private-scoped endpoints.

Run your application and verify that:

  • GET /api/private is available for authenticated requests.

  • GET /api/private-scoped is available for authenticated requests containing an access token with the read:messages scope.

-Still having issues? To get more help, check out our documentation or visit our community page. +
-::: +

Sorry about that. Here are a few things to double check:

  • make sure ValidIssuer and ValidAudience are configured correctly

  • make sure the token is added as the Authorization header

  • check that the token has the correct scopes (you can use jwt.io to verify)

Still having issues? To get more help, check out our documentation or visit our community page.

-:::: +

diff --git a/articles/quickstart/backend/django/interactive.md b/articles/quickstart/backend/django/interactive.md index cb6d97bc86..c98bba2882 100644 --- a/articles/quickstart/backend/django/interactive.md +++ b/articles/quickstart/backend/django/interactive.md @@ -7,19 +7,19 @@ files: - files/apiexample/views - files/apiexample/urls github: - path: https://github.com/auth0-samples/auth0-django-api/tree/master/01-Authorization + path: 01-Authorization locale: en-US --- # Add Authorization to Your Django API Application -

This guide demonstrates how to integrate Auth0 with any new or existing Python API built with Django.

If you haven't created an API in your Auth0 Dashboard yet, you can use the interactive selector to create a new Auth0 API or select an existing API that represents the project you want to integrate with.

Alternatively, you can read our getting started guide, which will help you set up your first API through the Auth0 Dashboard.

Every API in Auth0 is configured using an API Identifier that your application code will use as the Audience to validate the Access Token.

New to Auth0? Learn how Auth0 works and read about implementing API authentication and authorization using the OAuth 2.0 framework.

+

This guide demonstrates how to integrate Auth0 with any new or existing Python API built with Django.

If you haven't created an API in your Auth0 Dashboard yet, you can use the interactive selector to create a new Auth0 API or select an existing API that represents the project you want to integrate with.

Alternatively, you can read our getting started guide, which will help you set up your first API through the Auth0 Dashboard.

Every API in Auth0 is configured using an API Identifier that your application code will use as the Audience to validate the Access Token.

New to Auth0? Learn how Auth0 works and read about implementing API authentication and authorization using the OAuth 2.0 framework.

## Define permissions -

Permissions let you define how resources can be accessed on behalf of the user with a given access token. For example, you might choose to grant read access to the messages resource if users have the manager access level, and grant write access to that resource if they have the administrator access level.

You can define allowed permissions in the Permissions view of the Auth0 Dashboard's APIs section. The following example uses the read:messages scope.

Auth0 Dashboard> Applications > APIs > [Specific API] > Permissions tab

+

Permissions let you define how resources can be accessed on behalf of the user with a given access token. For example, you might choose to grant read access to the messages resource if users have the manager access level, and grant write access to that resource if they have the administrator access level.

You can define allowed permissions in the Permissions view of the Auth0 Dashboard's APIs section. The following example uses the read:messages scope.

Auth0 Dashboard> Applications > APIs > [Specific API] > Permissions tab

## Configure Django to use Auth0 @@ -30,17 +30,8 @@ locale: en-US ## Create the JWT validator {{{ data-action="code" data-code="apiexample/validator.py" }}} -You're going to use a library called Authlib to create a ResourceProtector, which is a type of Django view decorator that protects your resources (API views) with a given validator. -The validator will verify the Access Token that you pass to the resource by checking that it has a valid signature and claims. - -You can use AuthLib's `JWTBearerTokenValidator` validator with a few tweaks to make sure it conforms to our requirements on validating Access Tokens. - -To create your `Auth0JWTBearerTokenValidator`, you need to pass it your `domain` and `audience` (API Identifier). It will then get the public key required to verify the token's signature and pass it to the `JWTBearerTokenValidator` class. - -You'll then override the class's `claims_options` to make sure the token's `expiry`, `audience`, and `issue` claims are validated according to our requirements. - -Create the file `apiexample/validator.py` using the code from the interactive panel. +

You will use a library called Authlib to create a ResourceProtector, which is a type of Django view decorator that protects your resources (API views) with a given validator.

The validator will verify the Access Token that you pass to the resource by checking that it has a valid signature and claims.

You can use AuthLib's JWTBearerTokenValidator validator with a few tweaks to make sure it conforms to our requirements for validating Access Tokens.

To create your Auth0JWTBearerTokenValidator, you need to pass it to your domain and audience (API Identifier). It will then get the public key required to verify the token's signature and pass it to the JWTBearerTokenValidator class.

You'll then override the class's claims_options to make sure the token's expiry, audience, and issue claims are validated according to our requirements.

Create the file apiexample/validator.py using the code from the interactive panel.

## Create the API views {{{ data-action="code" data-code="apiexample/views.py" }}} @@ -50,27 +41,27 @@ Create the file `apiexample/validator.py` using the code from the interactive pa ## Add URL mappings {{{ data-action="code" data-code="apiexample/urls.py#8:10" }}} -

In previous steps, you added methods to the views.py file. Next, map those methods to URLs using Django's URL dispatcher, which lets you map URL patterns to views.

Add the URL patterns to your apiexample/urls.py file.

Make a Call to Your API

To make calls to your API, you will need an access token. You can retrieve an access token for testing purposes from the Test view in your API settings.

Auth0 Dashboard> Applications > API > [Specific API] > Test tab

Provide the access token as an Authorization header in your requests.


+

In previous steps, you added methods to the views.py file. Next, map those methods to URLs using Django's URL dispatcher, which lets you map URL patterns to views.

Add the URL patterns to your apiexample/urls.py file.

Make a Call to Your API

To make calls to your API, you will need an access token. You can retrieve an access token for testing purposes from the Test view in your API settings.

Auth0 Dashboard> Applications > API > [Specific API] > Test tab

Provide the access token as an Authorization header in your requests.


 
 
- + -
curl --request get \
+  
curl --request get \
 
   --url 'http:///${account.namespace}.com/api_path' \
 
-  --header 'authorization: Bearer YOUR_ACCESS_TOKEN_HERE'
var client = new RestClient("http:///${account.namespace}.com/api_path");
+  --header 'authorization: Bearer YOUR_ACCESS_TOKEN_HERE'
var client = new RestClient("http:///${account.namespace}.com/api_path");
 
 var request = new RestRequest(Method.GET);
 
 request.AddHeader("authorization", "Bearer YOUR_ACCESS_TOKEN_HERE");
 
-IRestResponse response = client.Execute(request);
package main
+IRestResponse response = client.Execute(request);
package main
 
 
 
@@ -118,11 +109,11 @@ func main() {
 
 
 
-}
HttpResponse<String> response = Unirest.get("http:///${account.namespace}.com/api_path")
+}
HttpResponse<String> response = Unirest.get("http:///${account.namespace}.com/api_path")
 
   .header("authorization", "Bearer YOUR_ACCESS_TOKEN_HERE")
 
-  .asString();
var axios = require("axios").default;
+  .asString();
var axios = require("axios").default;
 
 
 
@@ -146,7 +137,7 @@ axios.request(options).then(function (response) {
 
   console.error(error);
 
-});
#import <Foundation/Foundation.h>
+});
#import <Foundation/Foundation.h>
 
 
 
@@ -186,7 +177,7 @@ NSURLSessionDataTask *dataTask = [session dataTaskWithRequest:request
 
                                             }];
 
-[dataTask resume];
$curl = curl_init();
+[dataTask resume];
$curl = curl_init();
 
 
 
@@ -234,7 +225,7 @@ if ($err) {
 
   echo $response;
 
-}
import http.client
+}
import http.client
 
 
 
@@ -256,7 +247,7 @@ data = res.read()
 
 
 
-print(data.decode("utf-8"))
require 'uri'
+print(data.decode("utf-8"))
require 'uri'
 
 require 'net/http'
 
@@ -278,7 +269,7 @@ request["authorization"] = 'Bearer YOUR_ACCESS_TOKEN_HERE'
 
 response = http.request(request)
 
-puts response.read_body
import Foundation
+puts response.read_body
import Foundation
 
 
 
diff --git a/articles/quickstart/backend/golang/interactive.md b/articles/quickstart/backend/golang/interactive.md
index 1fe58b32e5..003cb57ce6 100644
--- a/articles/quickstart/backend/golang/interactive.md
+++ b/articles/quickstart/backend/golang/interactive.md
@@ -6,19 +6,19 @@ files:
  - files/middleware/jwt
  - files/main
 github:
-  path: https://github.com/auth0-samples/auth0-golang-api-samples/tree/master/01-Authorization-RS256
+  path: 01-Authorization-RS256
 locale: en-US
 ---
 
 # Add Authorization to Your Go Application
 
 
-

This guide demonstrates how to integrate Auth0 with any new or existing Go API application using the go-jwt-middleware package.

If you have not created an API in your Auth0 dashboard yet, use the interactive selector to create a new Auth0 API or select an existing API for your project.

To set up your first API through the Auth0 dashboard, review our getting started guide.

Each Auth0 API uses the API Identifier, which your application needs to validate the access token.

New to Auth0? Learn how Auth0 works and read about implementing API authentication and authorization using the OAuth 2.0 framework.

+

This guide demonstrates how to integrate Auth0 with any new or existing Go API application using the go-jwt-middleware package.

If you have not created an API in your Auth0 dashboard yet, use the interactive selector to create a new Auth0 API or select an existing API for your project.

To set up your first API through the Auth0 dashboard, review our getting started guide.

Each Auth0 API uses the API Identifier, which your application needs to validate the access token.

New to Auth0? Learn how Auth0 works and read about implementing API authentication and authorization using the OAuth 2.0 framework.

## Define permissions -

Permissions let you define how resources can be accessed on behalf of the user with a given access token. For example, you might choose to grant read access to the messages resource if users have the manager access level, and a write access to that resource if they have the administrator access level.

You can define allowed permissions in the Permissions view of the Auth0 Dashboard's APIs section. The following example uses the read:messages scope.

Auth0 Dashboard> Applications > APIs > [Specific API] > Permissions tab

+

Permissions let you define how resources can be accessed on behalf of the user with a given access token. For example, you might choose to grant read access to the messages resource if users have the manager access level, and a write access to that resource if they have the administrator access level.

You can define allowed permissions in the Permissions view of the Auth0 Dashboard's APIs section. The following example uses the read:messages scope.

Auth0 Dashboard> Applications > APIs > [Specific API] > Permissions tab

## Install dependencies @@ -78,27 +78,27 @@ AUTH0_AUDIENCE='${apiIdentifier}' ## Protect API endpoints {{{ data-action="code" data-code="main.go" }}} -

In this example, create an /api/public endpoint that does not use the EnsureToken middleware as it is accessible to non-authenticated requests.

Create an /api/private endpoint that requires the EnsureToken middleware as it is only available to authenticated requests containing an access token with no additional scope.

Create an /api/private-scoped endpoint that requires the EnsureToken middleware and HasScope as it is only available for authenticated requests containing an access token with the read:messages scope granted.

Only the read:messages scope is checked by the HasScope function. You may want to extend it or make it a standalone middleware that accepts multiple scopes to fit your use case.

Make a Call to Your API

To make calls to your API, you need an Access Token. You can get an Access Token for testing purposes from the Test view in your API settings.

Auth0 Dashboard> Applications > API > [Specific API] > Test tab

Provide the Access Token as an Authorization header in your requests.


+

In this example, create an /api/public endpoint that does not use the EnsureToken middleware as it is accessible to non-authenticated requests.

Create an /api/private endpoint that requires the EnsureToken middleware as it is only available to authenticated requests containing an access token with no additional scope.

Create an /api/private-scoped endpoint that requires the EnsureToken middleware and HasScope as it is only available for authenticated requests containing an access token with the read:messages scope granted.

Only the read:messages scope is checked by the HasScope function. You may want to extend it or make it a standalone middleware that accepts multiple scopes to fit your use case.

Make a Call to Your API

To make calls to your API, you need an Access Token. You can get an Access Token for testing purposes from the Test view in your API settings.

Auth0 Dashboard> Applications > API > [Specific API] > Test tab

Provide the Access Token as an Authorization header in your requests.


 
 
- + -
curl --request get \
+  
curl --request get \
 
   --url 'http:///${account.namespace}/api_path' \
 
-  --header 'authorization: Bearer YOUR_ACCESS_TOKEN_HERE'
var client = new RestClient("http:///${account.namespace}/api_path");
+  --header 'authorization: Bearer YOUR_ACCESS_TOKEN_HERE'
var client = new RestClient("http:///${account.namespace}/api_path");
 
 var request = new RestRequest(Method.GET);
 
 request.AddHeader("authorization", "Bearer YOUR_ACCESS_TOKEN_HERE");
 
-IRestResponse response = client.Execute(request);
package main
+IRestResponse response = client.Execute(request);
package main
 
 
 
@@ -146,11 +146,11 @@ func main() {
 
 
 
-}
HttpResponse<String> response = Unirest.get("http:///${account.namespace}/api_path")
+}
HttpResponse<String> response = Unirest.get("http:///${account.namespace}/api_path")
 
   .header("authorization", "Bearer YOUR_ACCESS_TOKEN_HERE")
 
-  .asString();
var axios = require("axios").default;
+  .asString();
var axios = require("axios").default;
 
 
 
@@ -174,7 +174,7 @@ axios.request(options).then(function (response) {
 
   console.error(error);
 
-});
#import <Foundation/Foundation.h>
+});
#import <Foundation/Foundation.h>
 
 
 
@@ -214,7 +214,7 @@ NSURLSessionDataTask *dataTask = [session dataTaskWithRequest:request
 
                                             }];
 
-[dataTask resume];
$curl = curl_init();
+[dataTask resume];
$curl = curl_init();
 
 
 
@@ -262,7 +262,7 @@ if ($err) {
 
   echo $response;
 
-}
import http.client
+}
import http.client
 
 
 
@@ -284,7 +284,7 @@ data = res.read()
 
 
 
-print(data.decode("utf-8"))
require 'uri'
+print(data.decode("utf-8"))
require 'uri'
 
 require 'net/http'
 
@@ -306,7 +306,7 @@ request["authorization"] = 'Bearer YOUR_ACCESS_TOKEN_HERE'
 
 response = http.request(request)
 
-puts response.read_body
import Foundation
+puts response.read_body
import Foundation
 
 
 
@@ -354,6 +354,6 @@ dataTask.resume()
-

If your application did not start successfully:

  • Verify you added the token as the Authorization header

  • Ensure the token has the correct scopes. Verify with jwt.io.

Still having issues? Check out our documentation or visit our community page to get more help.

+

If your application did not start successfully:

  • Verify you added the token as the Authorization header

  • Ensure the token has the correct scopes. Verify with jwt.io.

Still having issues? Check out our documentation or visit our community page to get more help.

diff --git a/articles/quickstart/backend/java-spring-security5/interactive.md b/articles/quickstart/backend/java-spring-security5/interactive.md index c68d71b11b..eab5af715e 100644 --- a/articles/quickstart/backend/java-spring-security5/interactive.md +++ b/articles/quickstart/backend/java-spring-security5/interactive.md @@ -8,19 +8,19 @@ files: - files/Message - files/APIController github: - path: https://github.com/auth0-samples/auth0-spring-security5-api-sample/tree/master/01-Authorization-MVC + path: 01-Authorization-MVC locale: en-US --- # Add Authorization to Your Spring Boot Application -

Auth0 allows you to quickly add authorization to your application. This guide demonstrates how to integrate Auth0 with any new or existing Spring Boot application.

If you have not created an API in your Auth0 dashboard yet, use the interactive selector to create a new Auth0 API or select an existing API that represents the project you want to integrate with.

Review our getting started guide to set up your first API through the Auth0 dashboard.

Each Auth0 API uses the API Identifier, which your application needs to validate the access token.

New to Auth0? Learn how Auth0 works and read about implementing API authentication and authorization using the OAuth 2.0 framework.

+

Auth0 allows you to quickly add authorization to your application. This guide demonstrates how to integrate Auth0 with any new or existing Spring Boot application.

If you have not created an API in your Auth0 dashboard yet, use the interactive selector to create a new Auth0 API or select an existing API that represents the project you want to integrate with.

Review our getting started guide to set up your first API through the Auth0 dashboard.

Each Auth0 API uses the API Identifier, which your application needs to validate the access token.

New to Auth0? Learn how Auth0 works and read about implementing API authentication and authorization using the OAuth 2.0 framework.

## Define permissions -

Permissions let you define how resources can be accessed on behalf of the user with a given access token. For example, you might choose to grant read access to the messages resource if users have the manager access level, and a write access to that resource if they have the administrator access level.

You can define allowed permissions in the Permissions view of the Auth0 Dashboard's APIs section.

Auth0 Dashboard> Applications > APIs > [Specific API] > Permissions tab

This example uses the read:messages scope.

+

Permissions let you define how resources can be accessed on behalf of the user with a given access token. For example, you might choose to grant read access to the messages resource if users have the manager access level, and a write access to that resource if they have the administrator access level.

You can define allowed permissions in the Permissions view of the Auth0 Dashboard's APIs section.

Auth0 Dashboard> Applications > APIs > [Specific API] > Permissions tab

This example uses the read:messages scope.

## Configure the sample project {{{ data-action="code" data-code="application.yml#1:6" }}} @@ -30,7 +30,7 @@ locale: en-US ## Install dependencies {{{ data-action="code" data-code="application.yml#1:6" }}} -

If you are using Gradle, you can add the required dependencies using the Spring Boot Gradle Plugin and the Dependency Management Plugin to resolve dependency versions:

// build.gradle
+

If you are using Gradle, you can add the required dependencies using the Spring Boot Gradle Plugin and the Dependency Management Plugin to resolve dependency versions:

// build.gradle
 
 
 
@@ -114,15 +114,32 @@ locale: en-US
 
 ## Create the API controller {{{ data-action="code" data-code="APIController.java" }}}
 
-Create a new class named `APIController` to handle requests to the endpoints. The `APIController` has three routes as defined in the [Protect API Endpoints](/quickstart/backend/java-spring-security5/interactive/#configure-the-resource-server) section. For this example, allow all origins through `@CrossOrigin` annotation. Real applications should configure `CORS` for their use case.
+
+

Create a new class named APIController to handle requests to the endpoints. The APIController has three routes as defined in the Protect API Endpoints section. For this example, allow all origins through @CrossOrigin annotation. Real applications should configure CORS for their use case.

## Run the application {{{ data-action="code" data-code="APIController.java" }}} -

To build and run the sample project, execute the bootRun Gradle task.

Linux or macOS:

./gradlew bootRun

Windows:

gradlew.bat bootRun

If you are configuring your own application using Maven and the Spring Boot Maven Plugin, you can execute the spring-boot:run goal.

Linux or macOS:

mvn spring-boot:run

Windows:

mvn.cmd spring-boot:run

Spring Boot API Step 7 Checkpoint

The sample application will be available at http://localhost:3010/. Read about how to test and use your API in the Using Your API article.

+

To build and run the sample project, execute the bootRun Gradle task.

Linux or macOS:

./gradlew bootRun
+
+
+ +

Windows:

gradlew.bat bootRun
+
+
+ +

If you are configuring your own application using Maven and the Spring Boot Maven Plugin, you can execute the spring-boot:run goal.

Linux or macOS:

mvn spring-boot:run
+
+
+ +

Windows:

mvn.cmd spring-boot:run
+
+
+ +

Spring Boot API Step 7 Checkpoint

The sample application will be available at http://localhost:3010/. Read about how to test and use your API in the Using Your API article.

-

If your application did not launch successfully:

Still having issues? Check out our documentation or visit our community page to get more help.

+

If your application did not launch successfully:

Still having issues? Check out our documentation or visit our community page to get more help.

diff --git a/articles/quickstart/backend/laravel/interactive.md b/articles/quickstart/backend/laravel/interactive.md index 4a2fdf965a..b49f6875e9 100644 --- a/articles/quickstart/backend/laravel/interactive.md +++ b/articles/quickstart/backend/laravel/interactive.md @@ -5,14 +5,14 @@ interactive: true files: - files/routes/api github: - path: https://github.com/auth0-samples/laravel/tree/7.x/sample + path: sample locale: en-US --- # Add Authorization to Your Laravel Application -

Auth0's Laravel SDK allows you to quickly add token-based authorization and route access control to your Laravel application. This guide demonstrates how to integrate Auth0 with a new (or existing) Laravel 9 or 10 application.


Backend applications differ from traditional web applications in that they do not handle user authentication or have a user interface. They provide an API that other applications can interact with. They accept access tokens from Authorization headers in requests to control access to routes.

Separate front-end applications are usually built to interact with these types of backends. These can be anything from single-page applications or native or mobile apps (all of which Auth0 also provides SDKs for!)

When users need to interact with your backend application, they first authenticate with Auth0 using the frontend application. The frontend application then retrieves an access token from Auth0, which it can use to make requests to your backend application on behalf of the user.

As their name implies, access tokens are designed to address matters of access control (authorization), and do not contain information about the user. Backend applications work exclusively with access tokens. You can retrieve information about the user who created the token using the Management API, which we will demonstrate later.

+

Auth0's Laravel SDK allows you to quickly add token-based authorization and route access control to your Laravel application. This guide demonstrates how to integrate Auth0 with a new (or existing) Laravel 9 or 10 application.


Backend applications differ from traditional web applications in that they do not handle user authentication or have a user interface. They provide an API that other applications can interact with. They accept access tokens from Authorization headers in requests to control access to routes.

Separate front-end applications are usually built to interact with these types of backends. These can be anything from single-page applications or native or mobile apps (all of which Auth0 also provides SDKs for!)

When users need to interact with your backend application, they first authenticate with Auth0 using the frontend application. The frontend application then retrieves an access token from Auth0, which it can use to make requests to your backend application on behalf of the user.

As their name implies, access tokens are designed to address matters of access control (authorization), and do not contain information about the user. Backend applications work exclusively with access tokens. You can retrieve information about the user who created the token using the Management API, which we will demonstrate later.

## Laravel Installation @@ -30,7 +30,7 @@ locale: en-US ## SDK Installation -

Run the following command within your project directory to install the Auth0 Laravel SDK:

composer require auth0/login:^7.8 --update-with-all-dependencies
+

Run the following command within your project directory to install the Auth0 Laravel SDK:

composer require auth0/login:^7.8 --update-with-all-dependencies
 
 
@@ -43,7 +43,7 @@ locale: en-US ## SDK Configuration -

Run the following command from your project directory to download the Auth0 CLI:

curl -sSfL https://raw.githubusercontent.com/auth0/auth0-cli/main/install.sh | sh -s -- -b .
+

Run the following command from your project directory to download the Auth0 CLI:

curl -sSfL https://raw.githubusercontent.com/auth0/auth0-cli/main/install.sh | sh -s -- -b .
 
 
@@ -106,7 +106,7 @@ locale: en-US
-

You can also require the provided token to have specific permissions by combining this with Laravel's can middleware:

Route::get('/scope', function () {
+

You can also require the provided token to have specific permissions by combining this with Laravel's can middleware:

Route::get('/scope', function () {
 
  return response()->json([
 
@@ -156,7 +156,7 @@ locale: en-US
 ## Retrieve User Information {{{ data-action="code" data-code="routes/api.php#32:51" }}}
 
 
-

You can retrieve information about the user who created the access token from Auth0 using the Auth0 Management API. The SDK provides a convenient wrapper for this API, accessible through the SDK's management() method.

Before making Management API calls you must enable your application to communicate with the Management API. This can be done from the Auth0 Dashboard's API page, choosing Auth0 Management API, and selecting the 'Machine to Machine Applications' tab. Authorize your Laravel application, and then click the down arrow to choose the scopes you wish to grant.

For the following example, you should grant the read:users scope. A list of API endpoints and the required scopes can be found in the Management API documentation.

use Auth0\Laravel\Facade\Auth0;
+

You can retrieve information about the user who created the access token from Auth0 using the Auth0 Management API. The SDK provides a convenient wrapper for this API, accessible through the SDK's management() method.

Before making Management API calls you must enable your application to communicate with the Management API. This can be done from the Auth0 Dashboard's API page, choosing Auth0 Management API, and selecting the 'Machine to Machine Applications' tab. Authorize your Laravel application, and then click the down arrow to choose the scopes you wish to grant.

For the following example, you should grant the read:users scope. A list of API endpoints and the required scopes can be found in the Management API documentation.

use Auth0\Laravel\Facade\Auth0;
 
 
 
@@ -216,10 +216,10 @@ Route::get('/me', function () {
 ## Retrieve a Test Token
 
 
-

You can learn more about retrieving access tokens here. For this quickstart, however, you can simply use an access token from your API settings' "test" view.

The /me route we created above will not work with a test token as there is no actual user associated with it.

Laravel Quickstart Step 8 Checkpoint

Open a shell and try issuing requests to your application.

Begin by requesting the public route:

curl --request GET \ --url http://localhost:8000/api \ --header 'Accept: application/json'

Next, use your access token in an Authorization header to request a protected route:

curl --request GET \ --url http://localhost:8000/api/private \ --header 'Accept: application/json' \ --header 'Authorization: Bearer YOUR_ACCESS_TOKEN'

Finally, try requesting the scope-protected route, which will only succeed if the access token has the read:messages scope granted:

curl --request GET \ --url http://localhost:8000/api/scope \ --header 'Accept: application/json' \ --header 'Authorization: Bearer YOUR_ACCESS_TOKEN'

+

You can learn more about retrieving access tokens here. For this quickstart, however, you can simply use an access token from your API settings' "test" view.

The /me route we created above will not work with a test token as there is no actual user associated with it.

Laravel Quickstart Step 8 Checkpoint

Open a shell and try issuing requests to your application.

Begin by requesting the public route:

curl --request GET \ --url http://localhost:8000/api \ --header 'Accept: application/json'

Next, use your access token in an Authorization header to request a protected route:

curl --request GET \ --url http://localhost:8000/api/private \ --header 'Accept: application/json' \ --header 'Authorization: Bearer YOUR_ACCESS_TOKEN'

Finally, try requesting the scope-protected route, which will only succeed if the access token has the read:messages scope granted:

curl --request GET \ --url http://localhost:8000/api/scope \ --header 'Accept: application/json' \ --header 'Authorization: Bearer YOUR_ACCESS_TOKEN'

-

Here are a couple of things to try:

  • Try running php artisan optimize:clear to clear Laravel's cache.

  • Ensure your .auth0.app.json and .auth0.api.json files are at the root of your project.

  • Ensure you have enabled your Laravel application as a Machine-to-Machine application and granted it all the necessary scopes for the Auth0 Management API from the Auth0 Dashboard.

Encountering problems? Check the SDK's documentation or our documentation hub. You should also consider visiting the community where our team and other community members can help answer your questions.

+

Here are a couple of things to try:

  • Try running php artisan optimize:clear to clear Laravel's cache.

  • Ensure your .auth0.app.json and .auth0.api.json files are at the root of your project.

  • Ensure you have enabled your Laravel application as a Machine-to-Machine application and granted it all the necessary scopes for the Auth0 Management API from the Auth0 Dashboard.

Encountering problems? Check the SDK's documentation or our documentation hub. You should also consider visiting the community where our team and other community members can help answer your questions.

-

Additional Reading

  • User Repositories and Models extends the Auth0 Laravel SDK to use custom user models, and how to store and retrieve users from a database.

  • Hooking Events covers how to listen for events raised by the Auth0 Laravel SDK, to fully customize the behavior of your integration.

  • Management API support is built into the Auth0 Laravel SDK, allowing you to interact with the Management API from your Laravel application.

+

Additional Reading

  • User Repositories and Models extends the Auth0 Laravel SDK to use custom user models, and how to store and retrieve users from a database.

  • Hooking Events covers how to listen for events raised by the Auth0 Laravel SDK, to fully customize the behavior of your integration.

  • Management API support is built into the Auth0 Laravel SDK, allowing you to interact with the Management API from your Laravel application.

diff --git a/articles/quickstart/backend/nodejs/interactive.md b/articles/quickstart/backend/nodejs/interactive.md index d65b2d2094..2657dfc58f 100644 --- a/articles/quickstart/backend/nodejs/interactive.md +++ b/articles/quickstart/backend/nodejs/interactive.md @@ -5,19 +5,19 @@ interactive: true files: - files/server github: - path: https://github.com/auth0-samples/auth0-express-api-samples/tree/master/01-Authorization-RS256 + path: 01-Authorization-RS256 locale: en-US --- # Add Authorization to Your Express.js API Application -

This guide demonstrates how to integrate Auth0 with any new or existing Express.js API application using the express-oauth2-jwt-bearer package.

If you have not created an API in your Auth0 dashboard yet, use the interactive selector to create a new Auth0 API or select an existing project API.

To set up your first API through the Auth0 dashboard, review our getting started guide. Each Auth0 API uses the API Identifier, which your application needs to validate the access token.

New to Auth0? Learn how Auth0 works and read about implementing API authentication and authorization using the OAuth 2.0 framework.

+

This guide demonstrates how to integrate Auth0 with any new or existing Express.js API application using the express-oauth2-jwt-bearer package.

If you have not created an API in your Auth0 dashboard yet, use the interactive selector to create a new Auth0 API or select an existing project API.

To set up your first API through the Auth0 dashboard, review our getting started guide. Each Auth0 API uses the API Identifier, which your application needs to validate the access token.

New to Auth0? Learn how Auth0 works and read about implementing API authentication and authorization using the OAuth 2.0 framework.

## Define permissions -

Permissions let you define how resources can be accessed on behalf of the user with a given access token. For example, you might choose to grant read access to the messages resource if users have the manager access level, and a write access to that resource if they have the administrator access level.

You can define allowed permissions in the Permissions view of the Auth0 Dashboard's APIs section.

This example uses the read:messages scope.

+

Permissions let you define how resources can be accessed on behalf of the user with a given access token. For example, you might choose to grant read access to the messages resource if users have the manager access level, and a write access to that resource if they have the administrator access level.

You can define allowed permissions in the Permissions view of the Auth0 Dashboard's APIs section.

This example uses the read:messages scope.

## Install dependencies @@ -36,18 +36,282 @@ locale: en-US ## Protect API endpoints {{{ data-action="code" data-code="server.js#12:32" }}} -

To protect an individual route by requiring a valid JWT, configure the route with the checkJwt middleware constructed from express-oauth2-jwt-bearer.

You can configure individual routes to look for a particular scope. To achieve that, set up another middleware with the requiresScope method. Provide the required scopes and apply the middleware to any routes you want to add authorization to.

Pass the checkJwt and requiredScopes middlewares to the route you want to protect.

In this configuration, only access tokens with the read:messages scope can access the endpoint.

Make a Call to Your API

To make calls to your API, you need an Access Token. You can get an Access Token for testing purposes from the Test view in your API settings.

Provide the Access Token as an Authorization header in your requests.

curl --request GET \
+

To protect an individual route by requiring a valid JWT, configure the route with the checkJwt middleware constructed from express-oauth2-jwt-bearer.

You can configure individual routes to look for a particular scope. To achieve that, set up another middleware with the requiresScope method. Provide the required scopes and apply the middleware to any routes you want to add authorization to.

Pass the checkJwt and requiredScopes middlewares to the route you want to protect.

In this configuration, only access tokens with the read:messages scope can access the endpoint.

Make a Call to Your API

To make calls to your API, you need an Access Token. You can get an Access Token for testing purposes from the Test view in your API settings.

Provide the Access Token as an Authorization header in your requests.


 
-  --url http://${account.namespace}/api_path \
+
+ + + + + + + +
curl --request get \
+
+  --url http:///%7ByourDomain%7D/api_path \
+
+  --header 'authorization: Bearer YOUR_ACCESS_TOKEN_HERE'
var client = new RestClient("http:///%7ByourDomain%7D/api_path");
+
+var request = new RestRequest(Method.GET);
+
+request.AddHeader("authorization", "Bearer YOUR_ACCESS_TOKEN_HERE");
+
+IRestResponse response = client.Execute(request);
package main
+
+
+
+import (
+
+ "fmt"
+
+ "net/http"
+
+ "io/ioutil"
+
+)
+
+
+
+func main() {
+
+
+
+ url := "http:///%7ByourDomain%7D/api_path"
+
+
+
+ req, _ := http.NewRequest("get", url, nil)
+
+
+
+ req.Header.Add("authorization", "Bearer YOUR_ACCESS_TOKEN_HERE")
+
+
+
+ res, _ := http.DefaultClient.Do(req)
+
+
+
+ defer res.Body.Close()
+
+ body, _ := ioutil.ReadAll(res.Body)
+
+
+
+ fmt.Println(res)
+
+ fmt.Println(string(body))
+
+
+
+}
HttpResponse<String> response = Unirest.get("http:///%7ByourDomain%7D/api_path")
+
+  .header("authorization", "Bearer YOUR_ACCESS_TOKEN_HERE")
+
+  .asString();
var axios = require("axios").default;
+
+
+
+var options = {
+
+  method: 'get',
+
+  url: 'http:///%7ByourDomain%7D/api_path',
+
+  headers: {authorization: 'Bearer YOUR_ACCESS_TOKEN_HERE'}
+
+};
+
+
+
+axios.request(options).then(function (response) {
+
+  console.log(response.data);
+
+}).catch(function (error) {
+
+  console.error(error);
+
+});
#import <Foundation/Foundation.h>
+
+
+
+NSDictionary *headers = @{ @"authorization": @"Bearer YOUR_ACCESS_TOKEN_HERE" };
+
+
+
+NSMutableURLRequest *request = [NSMutableURLRequest requestWithURL:[NSURL URLWithString:@"http:///%7ByourDomain%7D/api_path"]
+
+                                                       cachePolicy:NSURLRequestUseProtocolCachePolicy
+
+                                                   timeoutInterval:10.0];
+
+[request setHTTPMethod:@"get"];
+
+[request setAllHTTPHeaderFields:headers];
+
+
+
+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];
$curl = curl_init();
+
+
+
+curl_setopt_array($curl, [
+
+  CURLOPT_URL => "http:///%7ByourDomain%7D/api_path",
+
+  CURLOPT_RETURNTRANSFER => true,
+
+  CURLOPT_ENCODING => "",
+
+  CURLOPT_MAXREDIRS => 10,
+
+  CURLOPT_TIMEOUT => 30,
+
+  CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
+
+  CURLOPT_CUSTOMREQUEST => "get",
+
+  CURLOPT_HTTPHEADER => [
+
+    "authorization: Bearer YOUR_ACCESS_TOKEN_HERE"
+
+  ],
+
+]);
+
+
+
+$response = curl_exec($curl);
+
+$err = curl_error($curl);
+
+
+
+curl_close($curl);
+
+
+
+if ($err) {
+
+  echo "cURL Error #:" . $err;
+
+} else {
+
+  echo $response;
+
+}
import http.client
+
+
+
+conn = http.client.HTTPConnection("")
+
+
+
+headers = { 'authorization': "Bearer YOUR_ACCESS_TOKEN_HERE" }
+
+
+
+conn.request("get", "%7ByourDomain%7D/api_path", headers=headers)
+
+
+
+res = conn.getresponse()
+
+data = res.read()
+
+
+
+print(data.decode("utf-8"))
require 'uri'
+
+require 'net/http'
+
+
+
+url = URI("http:///%7ByourDomain%7D/api_path")
+
+
+
+http = Net::HTTP.new(url.host, url.port)
+
+
+
+request = Net::HTTP::Get.new(url)
+
+request["authorization"] = 'Bearer YOUR_ACCESS_TOKEN_HERE'
+
+
+
+response = http.request(request)
+
+puts response.read_body
import Foundation
+
+
+
+let headers = ["authorization": "Bearer YOUR_ACCESS_TOKEN_HERE"]
+
+
+
+let request = NSMutableURLRequest(url: NSURL(string: "http:///%7ByourDomain%7D/api_path")! as URL,
+
+                                        cachePolicy: .useProtocolCachePolicy,
+
+                                    timeoutInterval: 10.0)
+
+request.httpMethod = "get"
+
+request.allHTTPHeaderFields = headers
+
+
+
+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()
- --header 'authorization: Bearer YOUR_ACCESS_TOKEN_HERE' -

Node JS API Step 4 Checkpoint

Now that you have configured your application, run your application to verify that:

  • GET /api/public is available for non-authenticated requests.

  • GET /api/private is available for authenticated requests.

  • GET /api/private-scoped is available for authenticated requests containing an access token with the read:messages scope.

-

If your application did not start successfully:

  • Verify you added the token as the Authorization header

  • Ensure the token has the correct scopes. Verify with jwt.io.

Still having issues? Check out our documentation or visit our community page to get more help.

+

If your application did not start successfully:

  • Verify you added the token as the Authorization header

  • Ensure the token has the correct scopes. Verify with jwt.io.

Still having issues? Check out our documentation or visit our community page to get more help.

diff --git a/articles/quickstart/backend/php/interactive.md b/articles/quickstart/backend/php/interactive.md index 19b0ebf8ec..be6785019d 100644 --- a/articles/quickstart/backend/php/interactive.md +++ b/articles/quickstart/backend/php/interactive.md @@ -6,7 +6,7 @@ files: - files/index - files/router github: - path: https://github.com/auth0-samples/auth0-php-api-samples/tree/main/app + path: app locale: en-US --- @@ -18,12 +18,12 @@ locale: en-US ## Configure Auth0 -

To use Auth0 services, you need to have an application registered in the Auth0 Dashboard. The Auth0 application is where you configure how you want authentication to work for your project.

Configure an application

Use the interactive selector to create a new Auth0 application or select an existing application that represents the project you want to integrate. Every application in Auth0 is assigned an alphanumeric, unique client ID that your application code uses to call Auth0 APIs through the SDK.

Any settings you configure using this quickstart automatically updates for your application in the Dashboard, which is where you can manage your applications in the future.

If you would rather explore a complete configuration, you can view a sample application instead.

Configure an API

Similarly, you need to create a new Auth0 API or use an existing API that represents the project you're integrating from the Dashboard. Choose a unique identifier for the API and make a note of it. You need that identifier to configure your application below.

+

To use Auth0 services, you need to have an application registered in the Auth0 Dashboard. The Auth0 application is where you configure how you want authentication to work for your project.

Configure an application

Use the interactive selector to create a new Auth0 application or select an existing application that represents the project you want to integrate. Every application in Auth0 is assigned an alphanumeric, unique client ID that your application code uses to call Auth0 APIs through the SDK.

Any settings you configure using this quickstart automatically updates for your application in the Dashboard, which is where you can manage your applications in the future.

If you would rather explore a complete configuration, you can view a sample application instead.

Configure an API

Similarly, you need to create a new Auth0 API or use an existing API that represents the project you're integrating from the Dashboard. Choose a unique identifier for the API and make a note of it. You need that identifier to configure your application below.

## Install the Auth0 PHP SDK {{{ data-action="code" data-code="index.php" }}} -

Auth0 provides a PHP SDK (Auth0-PHP) to simplify the process of implementing Auth0 authentication and authorization in PHP apps.

The Auth0 PHP SDK requires PSR-17 and PSR-18 installed, compatible HTTP libraries for managing network requests. If you don't have libraries available, you can install reliable choices by running the following commands in your terminal:

cd <your-project-directory>
+

Auth0 provides a PHP SDK (Auth0-PHP) to simplify the process of implementing Auth0 authentication and authorization in PHP apps.

The Auth0 PHP SDK requires PSR-17 and PSR-18 installed, compatible HTTP libraries for managing network requests. If you don't have libraries available, you can install reliable choices by running the following commands in your terminal:

cd <your-project-directory>
 
     composer require symfony/http-client nyholm/psr7
 
@@ -37,7 +37,7 @@ locale: en-US
 
   
-

Sorry about that. Here's a couple things to double check:

  • Make sure the correct application is selected.

  • Did you save after entering your URLs?

  • Make sure the domain and client ID imported correctly.

Still having issues? Check out our documentation or visit our community page to get more help.

+

Sorry about that. Here's a couple things to double check:

  • Make sure the correct application is selected.

  • Did you save after entering your URLs?

  • Make sure the domain and client ID imported correctly.

Still having issues? Check out our documentation or visit our community page to get more help.

diff --git a/articles/quickstart/backend/python/01-authorization.md b/articles/quickstart/backend/python/01-authorization.md index 44b988113b..817b8df0c7 100644 --- a/articles/quickstart/backend/python/01-authorization.md +++ b/articles/quickstart/backend/python/01-authorization.md @@ -26,9 +26,9 @@ useCase: quickstart ```python # /requirements.txt -flask==2.3.3 +flask python-dotenv -pyjwt +python-jose flask-cors six ``` @@ -46,7 +46,7 @@ from functools import wraps from flask import Flask, request, jsonify, _request_ctx_stack from flask_cors import cross_origin -import jwt +from jose import jwt AUTH0_DOMAIN = '${account.namespace}' API_AUDIENCE = YOUR_API_AUDIENCE @@ -112,15 +112,21 @@ def requires_auth(f): jsonurl = urlopen("https://"+AUTH0_DOMAIN+"/.well-known/jwks.json") jwks = json.loads(jsonurl.read()) unverified_header = jwt.get_unverified_header(token) - public_key = None + rsa_key = {} for key in jwks["keys"]: if key["kid"] == unverified_header["kid"]: - public_key = jwt.algorithms.RSAAlgorithm.from_jwk(json.dumps(jwk)) - if public_key: + rsa_key = { + "kty": key["kty"], + "kid": key["kid"], + "use": key["use"], + "n": key["n"], + "e": key["e"] + } + if rsa_key: try: payload = jwt.decode( token, - public_key, + rsa_key, algorithms=ALGORITHMS, audience=API_AUDIENCE, issuer="https://"+AUTH0_DOMAIN+"/" @@ -128,16 +134,11 @@ def requires_auth(f): except jwt.ExpiredSignatureError: raise AuthError({"code": "token_expired", "description": "token is expired"}, 401) - except jwt.InvalidAudienceError: - raise AuthError({"code": "invalid_audience", + except jwt.JWTClaimsError: + raise AuthError({"code": "invalid_claims", "description": - "incorrect audience," - " please check the audience"}, 401) - except jwt.InvalidIssuerError - raise AuthError({"code": "invalid_issuer", - "description": - "incorrect issuer," - " please check the issuer"}, 401) + "incorrect claims," + "please check the audience and issuer"}, 401) except Exception: raise AuthError({"code": "invalid_header", "description": @@ -164,7 +165,7 @@ def requires_scope(required_scope): required_scope (str): The scope required to access the resource """ token = get_token_auth_header() - unverified_claims = jwt.decode(token, options={"verify_signature": False}) + unverified_claims = jwt.get_unverified_claims(token) if unverified_claims.get("scope"): token_scopes = unverified_claims["scope"].split() for token_scope in token_scopes: diff --git a/articles/quickstart/backend/python/interactive.md b/articles/quickstart/backend/python/interactive.md index 62cdfd2ce7..be1e1fc802 100644 --- a/articles/quickstart/backend/python/interactive.md +++ b/articles/quickstart/backend/python/interactive.md @@ -6,19 +6,19 @@ files: - files/validator - files/server github: - path: https://github.com/auth0-samples/auth0-python-api-samples/tree/master/00-Starter-Seed + path: 00-Starter-Seed locale: en-US --- # Add Authorization to Your Flask API Application -

This guide demonstrates how to integrate Auth0 with any new or existing Python API built with Flask.

If you haven't created an API in your Auth0 dashboard yet, you can use the interactive selector to create a new Auth0 API or select an existing API that represents the project you want to integrate with.

Alternatively, you can read our getting started guide that helps you set up your first API through the Auth0 dashboard.

Every API in Auth0 is configured using an API Identifier that your application code will use as the Audience to validate the Access Token.

New to Auth0? Learn how Auth0 works and read about implementing API authentication and authorization using the OAuth 2.0 framework.

+

This guide demonstrates how to integrate Auth0 with any new or existing Python API built with Flask.

If you haven't created an API in your Auth0 dashboard yet, you can use the interactive selector to create a new Auth0 API or select an existing API that represents the project you want to integrate with.

Alternatively, you can read our getting started guide that helps you set up your first API through the Auth0 dashboard.

Every API in Auth0 is configured using an API Identifier that your application code will use as the Audience to validate the Access Token.

New to Auth0? Learn how Auth0 works and read about implementing API authentication and authorization using the OAuth 2.0 framework.

## Define permissions -

Permissions let you define how resources can be accessed on behalf of the user with a given access token. For example, you might choose to grant read access to the messages resource if users have the manager access level, and a write access to that resource if they have the administrator access level.

You can define allowed permissions in the Permissions view of the Auth0 Dashboard's APIs section.

Auth0 Dashboard> Applications > APIs > [Specific API] > Permissions tab

This example uses the read:messages scope.

+

Permissions let you define how resources can be accessed on behalf of the user with a given access token. For example, you might choose to grant read access to the messages resource if users have the manager access level, and a write access to that resource if they have the administrator access level.

You can define allowed permissions in the Permissions view of the Auth0 Dashboard's APIs section.

Auth0 Dashboard> Applications > APIs > [Specific API] > Permissions tab

This example uses the read:messages scope.

## Install dependencies @@ -38,17 +38,281 @@ locale: en-US ## Create the JWT validator {{{ data-action="code" data-code="validator.py" }}} -

We're going to use a library called Authlib to create a ResourceProtector, which is a type of Flask decorator that protects our resources (API routes) with a given validator.

The validator will validate the Access Token that we pass to the resource by checking that it has a valid signature and claims.

We can use AuthLib's JWTBearerTokenValidator validator with a few tweaks to make sure it conforms to our requirements on validating Access Tokens.

To create our Auth0JWTBearerTokenValidator we need to pass it our domain and audience (API Identifier). It will then get the public key required to verify the token's signature and pass it to the JWTBearerTokenValidator class.

We'll then override the class's claims_options to make sure the token's expiry, audience and issue claims are validated according to our requirements.

+

We're going to use a library called Authlib to create a ResourceProtector, which is a type of Flask decorator that protects our resources (API routes) with a given validator.

The validator will validate the Access Token that we pass to the resource by checking that it has a valid signature and claims.

We can use AuthLib's JWTBearerTokenValidator validator with a few tweaks to make sure it conforms to our requirements on validating Access Tokens.

To create our Auth0JWTBearerTokenValidator we need to pass it our domain and audience (API Identifier). It will then get the public key required to verify the token's signature and pass it to the JWTBearerTokenValidator class.

We'll then override the class's claims_options to make sure the token's expiry, audience and issue claims are validated according to our requirements.

## Create a Flask application {{{ data-action="code" data-code="server.py" }}} -

Next we'll create a Flask application with 3 API routes:

  • /api/public A public endpoint that requires no authentication.

  • /api/private A private endpoint that requires a valid Access Token JWT.

  • /api/private-scoped A private endpoint that requires a valid Access Token JWT that contains the given scope.

The protected routes will have a require_auth decorator which is a ResourceProtector that uses the Auth0JWTBearerTokenValidator we created earlier.

To create the Auth0JWTBearerTokenValidator we'll pass it our tenant's domain and the API Identifier of the API we created earlier.

The require_auth decorator on the private_scoped route accepts an additional argument "read:messages", which checks the Access Token for the Permission (Scope) we created earlier.

Make a Call to Your API

To make calls to your API, you need an Access Token. You can get an Access Token for testing purposes from the Test view in your API settings.

Auth0 Dashboard> Applications > API > [Specific API] > Test tab

Provide the Access Token as an Authorization header in your requests.

curl --request GET \
+

Next we'll create a Flask application with 3 API routes:

  • /api/public A public endpoint that requires no authentication.

  • /api/private A private endpoint that requires a valid Access Token JWT.

  • /api/private-scoped A private endpoint that requires a valid Access Token JWT that contains the given scope.

The protected routes will have a require_auth decorator which is a ResourceProtector that uses the Auth0JWTBearerTokenValidator we created earlier.

To create the Auth0JWTBearerTokenValidator we'll pass it our tenant's domain and the API Identifier of the API we created earlier.

The require_auth decorator on the private_scoped route accepts an additional argument "read:messages", which checks the Access Token for the Permission (Scope) we created earlier.

Make a Call to Your API

To make calls to your API, you need an Access Token. You can get an Access Token for testing purposes from the Test view in your API settings.

Auth0 Dashboard> Applications > API > [Specific API] > Test tab

Provide the Access Token as an Authorization header in your requests.


 
-  --url http://${account.namespace}/api_path \
+
+ + + + + + + +
curl --request get \
+
+  --url 'http:///${account.namespace}/api_path' \
+
+  --header 'authorization: Bearer YOUR_ACCESS_TOKEN_HERE'
var client = new RestClient("http:///${account.namespace}/api_path");
+
+var request = new RestRequest(Method.GET);
+
+request.AddHeader("authorization", "Bearer YOUR_ACCESS_TOKEN_HERE");
+
+IRestResponse response = client.Execute(request);
package main
+
+
+
+import (
+
+ "fmt"
+
+ "net/http"
+
+ "io/ioutil"
+
+)
+
+
+
+func main() {
+
+
+
+ url := "http:///${account.namespace}/api_path"
+
+
+
+ req, _ := http.NewRequest("get", url, nil)
+
+
+
+ req.Header.Add("authorization", "Bearer YOUR_ACCESS_TOKEN_HERE")
+
+
+
+ res, _ := http.DefaultClient.Do(req)
+
+
+
+ defer res.Body.Close()
+
+ body, _ := ioutil.ReadAll(res.Body)
+
+
+
+ fmt.Println(res)
+
+ fmt.Println(string(body))
+
+
+
+}
HttpResponse<String> response = Unirest.get("http:///${account.namespace}/api_path")
+
+  .header("authorization", "Bearer YOUR_ACCESS_TOKEN_HERE")
+
+  .asString();
var axios = require("axios").default;
+
+
+
+var options = {
+
+  method: 'get',
+
+  url: 'http:///${account.namespace}/api_path',
+
+  headers: {authorization: 'Bearer YOUR_ACCESS_TOKEN_HERE'}
+
+};
+
+
+
+axios.request(options).then(function (response) {
+
+  console.log(response.data);
+
+}).catch(function (error) {
+
+  console.error(error);
+
+});
#import <Foundation/Foundation.h>
+
+
+
+NSDictionary *headers = @{ @"authorization": @"Bearer YOUR_ACCESS_TOKEN_HERE" };
+
+
+
+NSMutableURLRequest *request = [NSMutableURLRequest requestWithURL:[NSURL URLWithString:@"http:///${account.namespace}/api_path"]
+
+                                                       cachePolicy:NSURLRequestUseProtocolCachePolicy
+
+                                                   timeoutInterval:10.0];
+
+[request setHTTPMethod:@"get"];
+
+[request setAllHTTPHeaderFields:headers];
+
+
+
+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];
$curl = curl_init();
+
+
+
+curl_setopt_array($curl, [
+
+  CURLOPT_URL => "http:///${account.namespace}/api_path",
+
+  CURLOPT_RETURNTRANSFER => true,
+
+  CURLOPT_ENCODING => "",
+
+  CURLOPT_MAXREDIRS => 10,
+
+  CURLOPT_TIMEOUT => 30,
+
+  CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
+
+  CURLOPT_CUSTOMREQUEST => "get",
+
+  CURLOPT_HTTPHEADER => [
+
+    "authorization: Bearer YOUR_ACCESS_TOKEN_HERE"
+
+  ],
+
+]);
+
+
+
+$response = curl_exec($curl);
+
+$err = curl_error($curl);
+
+
+
+curl_close($curl);
+
+
+
+if ($err) {
+
+  echo "cURL Error #:" . $err;
+
+} else {
+
+  echo $response;
+
+}
import http.client
+
+
+
+conn = http.client.HTTPConnection("")
+
+
+
+headers = { 'authorization': "Bearer YOUR_ACCESS_TOKEN_HERE" }
+
+
+
+conn.request("get", "/${account.namespace}/api_path", headers=headers)
+
+
+
+res = conn.getresponse()
+
+data = res.read()
+
+
+
+print(data.decode("utf-8"))
require 'uri'
+
+require 'net/http'
+
+
+
+url = URI("http:///${account.namespace}/api_path")
+
+
+
+http = Net::HTTP.new(url.host, url.port)
+
+
+
+request = Net::HTTP::Get.new(url)
+
+request["authorization"] = 'Bearer YOUR_ACCESS_TOKEN_HERE'
+
+
+
+response = http.request(request)
+
+puts response.read_body
import Foundation
+
+
+
+let headers = ["authorization": "Bearer YOUR_ACCESS_TOKEN_HERE"]
+
+
+
+let request = NSMutableURLRequest(url: NSURL(string: "http:///${account.namespace}/api_path")! as URL,
+
+                                        cachePolicy: .useProtocolCachePolicy,
+
+                                    timeoutInterval: 10.0)
+
+request.httpMethod = "get"
+
+request.allHTTPHeaderFields = headers
+
+
+
+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()
- --header 'authorization: Bearer YOUR_ACCESS_TOKEN_HERE' -

diff --git a/articles/quickstart/backend/rails/interactive.md b/articles/quickstart/backend/rails/interactive.md index 5fc5f3a668..b5d2d3936c 100644 --- a/articles/quickstart/backend/rails/interactive.md +++ b/articles/quickstart/backend/rails/interactive.md @@ -9,25 +9,19 @@ files: - files/app/controllers/public_controller - files/app/controllers/private_controller github: - path: https://github.com/auth0-samples/auth0-rubyonrails-api-samples/tree/master/01-Authentication-RS256 + path: 01-Authentication-RS256 locale: en-US --- # Add Authorization to Your Ruby on Rails API -This tutorial performs access token validation using the **jwt** Gem within a custom `Auth0Client` class. A Concern called `Secured` is used to authorize endpoints which require authentication through an incoming access token. -If you have not created an API in your Auth0 dashboard yet, use the interactive selector to create a new Auth0 API or select an existing API for your project. -To set up your first API through the Auth0 dashboard, review our getting started guide. - -Each Auth0 API uses the API Identifier, which your application needs to validate the access token. - -<%= include('../../../_includes/_api_auth_intro') %> +

This tutorial performs access token validation using the jwt Gem within a custom Auth0Client class. A Concern called Secured is used to authorize endpoints which require authentication through an incoming access token.

If you have not created an API in your Auth0 dashboard yet, use the interactive selector to create a new Auth0 API or select an existing API for your project.

To set up your first API through the Auth0 dashboard, review our getting started guide.

Each Auth0 API uses the API Identifier, which your application needs to validate the access token.

New to Auth0? Learn how Auth0 works and read about implementing API authentication and authorization using the OAuth 2.0 framework.

## Define permissions -

Permissions let you define how resources can be accessed on behalf of the user with a given access token. For example, you might choose to grant read access to the messages resource if users have the manager access level, and a write access to that resource if they have the administrator access level.

You can define allowed permissions in the Permissions view of the Auth0 Dashboard's APIs section.

Auth0 Dashboard> Applications > APIs > [Specific API] > Permissions tab

This example uses the read:messages scope.

+

Permissions let you define how resources can be accessed on behalf of the user with a given access token. For example, you might choose to grant read access to the messages resource if users have the manager access level, and a write access to that resource if they have the administrator access level.

You can define allowed permissions in the Permissions view of the Auth0 Dashboard's APIs section.

Auth0 Dashboard> Applications > APIs > [Specific API] > Permissions tab

This example uses the read:messages scope.

## Install dependencies @@ -63,18 +57,282 @@ Each Auth0 API uses the API Identifier, which your application needs to validate ## Create the private endpoints {{{ data-action="code" data-code="app/controllers/private_controller.rb" }}} -

Create a controller to handle the private endpoints: /api/private and /api/private-scoped.

/api/private is available for authenticated requests containing an access token with no additional scopes.

/api/private-scoped is available for authenticated requests containing an access token with the read:messages scope granted

The protected endpoints need to call the authorize method from the Secured concern, for that you use before_action :authorize, this ensure the Secured.authorize method is called before every action in the PrivateController.

Make a Call to Your API

To make calls to your API, you need an Access Token. You can get an Access Token for testing purposes from the Test view in your API settings.

Auth0 Dashboard> Applications > API > [Specific API] > Test tab

Provide the Access Token as an Authorization header in your requests.

curl --request GET \
+

Create a controller to handle the private endpoints: /api/private and /api/private-scoped.

/api/private is available for authenticated requests containing an access token with no additional scopes.

/api/private-scoped is available for authenticated requests containing an access token with the read:messages scope granted

The protected endpoints need to call the authorize method from the Secured concern, for that you use before_action :authorize, this ensure the Secured.authorize method is called before every action in the PrivateController.

Make a Call to Your API

To make calls to your API, you need an Access Token. You can get an Access Token for testing purposes from the Test view in your API settings.

Auth0 Dashboard> Applications > API > [Specific API] > Test tab

Provide the Access Token as an Authorization header in your requests.


 
-  --url http://${account.namespace}/api_path \
+
+ + + + + + + +
curl --request get \
+
+  --url 'http:///${account.namespace}/api_path' \
+
+  --header 'authorization: Bearer YOUR_ACCESS_TOKEN_HERE'
var client = new RestClient("http:///${account.namespace}/api_path");
+
+var request = new RestRequest(Method.GET);
+
+request.AddHeader("authorization", "Bearer YOUR_ACCESS_TOKEN_HERE");
+
+IRestResponse response = client.Execute(request);
package main
+
+
+
+import (
+
+ "fmt"
+
+ "net/http"
+
+ "io/ioutil"
+
+)
+
+
+
+func main() {
+
+
+
+ url := "http:///${account.namespace}/api_path"
+
+
+
+ req, _ := http.NewRequest("get", url, nil)
+
+
+
+ req.Header.Add("authorization", "Bearer YOUR_ACCESS_TOKEN_HERE")
+
+
+
+ res, _ := http.DefaultClient.Do(req)
+
+
+
+ defer res.Body.Close()
+
+ body, _ := ioutil.ReadAll(res.Body)
+
+
+
+ fmt.Println(res)
+
+ fmt.Println(string(body))
+
+
+
+}
HttpResponse<String> response = Unirest.get("http:///${account.namespace}/api_path")
+
+  .header("authorization", "Bearer YOUR_ACCESS_TOKEN_HERE")
+
+  .asString();
var axios = require("axios").default;
+
+
+
+var options = {
+
+  method: 'get',
+
+  url: 'http:///${account.namespace}/api_path',
+
+  headers: {authorization: 'Bearer YOUR_ACCESS_TOKEN_HERE'}
+
+};
+
+
+
+axios.request(options).then(function (response) {
+
+  console.log(response.data);
+
+}).catch(function (error) {
+
+  console.error(error);
+
+});
#import <Foundation/Foundation.h>
+
+
+
+NSDictionary *headers = @{ @"authorization": @"Bearer YOUR_ACCESS_TOKEN_HERE" };
+
+
+
+NSMutableURLRequest *request = [NSMutableURLRequest requestWithURL:[NSURL URLWithString:@"http:///${account.namespace}/api_path"]
+
+                                                       cachePolicy:NSURLRequestUseProtocolCachePolicy
+
+                                                   timeoutInterval:10.0];
+
+[request setHTTPMethod:@"get"];
+
+[request setAllHTTPHeaderFields:headers];
+
+
+
+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];
$curl = curl_init();
+
+
+
+curl_setopt_array($curl, [
+
+  CURLOPT_URL => "http:///${account.namespace}/api_path",
+
+  CURLOPT_RETURNTRANSFER => true,
+
+  CURLOPT_ENCODING => "",
+
+  CURLOPT_MAXREDIRS => 10,
+
+  CURLOPT_TIMEOUT => 30,
+
+  CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
+
+  CURLOPT_CUSTOMREQUEST => "get",
+
+  CURLOPT_HTTPHEADER => [
+
+    "authorization: Bearer YOUR_ACCESS_TOKEN_HERE"
+
+  ],
+
+]);
+
+
+
+$response = curl_exec($curl);
+
+$err = curl_error($curl);
+
+
+
+curl_close($curl);
+
+
+
+if ($err) {
+
+  echo "cURL Error #:" . $err;
+
+} else {
+
+  echo $response;
+
+}
import http.client
+
+
+
+conn = http.client.HTTPConnection("")
+
+
+
+headers = { 'authorization': "Bearer YOUR_ACCESS_TOKEN_HERE" }
+
+
+
+conn.request("get", "/${account.namespace}/api_path", headers=headers)
+
+
+
+res = conn.getresponse()
+
+data = res.read()
+
+
+
+print(data.decode("utf-8"))
require 'uri'
+
+require 'net/http'
+
+
+
+url = URI("http:///${account.namespace}/api_path")
+
+
+
+http = Net::HTTP.new(url.host, url.port)
+
+
+
+request = Net::HTTP::Get.new(url)
+
+request["authorization"] = 'Bearer YOUR_ACCESS_TOKEN_HERE'
+
+
+
+response = http.request(request)
+
+puts response.read_body
import Foundation
+
+
+
+let headers = ["authorization": "Bearer YOUR_ACCESS_TOKEN_HERE"]
+
+
+
+let request = NSMutableURLRequest(url: NSURL(string: "http:///${account.namespace}/api_path")! as URL,
+
+                                        cachePolicy: .useProtocolCachePolicy,
+
+                                    timeoutInterval: 10.0)
+
+request.httpMethod = "get"
+
+request.allHTTPHeaderFields = headers
+
+
+
+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()
- --header 'authorization: Bearer YOUR_ACCESS_TOKEN_HERE' -

Ruby on rails Step 7 Checkpoint

Now that you have configured your application, run your application to verify that:

  • GET /api/public is available for non-authenticated requests.

  • GET /api/private is available for authenticated requests.

  • GET /api/private-scoped is available for authenticated requests containing an Access Token with the read:messages scope.

-

If your application did not start successfully:

  • Verify you added the token as the Authorization header

  • Ensure the token has the correct scopes. Verify with jwt.io.

Still having issues? Check out our documentation or visit our community page to get more help.

+

If your application did not start successfully:

  • Verify you added the token as the Authorization header

  • Ensure the token has the correct scopes. Verify with jwt.io.

Still having issues? Check out our documentation or visit our community page to get more help.

diff --git a/articles/quickstart/backend/webapi-owin/interactive.md b/articles/quickstart/backend/webapi-owin/interactive.md index 491a82de60..9126bdb1d8 100644 --- a/articles/quickstart/backend/webapi-owin/interactive.md +++ b/articles/quickstart/backend/webapi-owin/interactive.md @@ -8,7 +8,7 @@ files: - files/ScopeAuthorizeAttribute - files/ApiController github: - path: https://github.com/auth0-samples/auth0-aspnet-owin-webapi-samples/tree/master/Quickstart/Sample + path: Quickstart/Sample locale: en-US --- @@ -20,7 +20,7 @@ locale: en-US ## Define permissions -

Permissions let you define how resources can be accessed on behalf of the user with a given access token. For example, you might choose to grant read access to the messages resource if users have the manager access level, and a write access to that resource if they have the administrator access level.

You can define allowed permissions in the Permissions view of the Auth0 Dashboard's APIs section. The following example uses the read:messages scope.

Auth0 Dashboard> Applications > APIs > [Specific API] > Permissions tab

+

Permissions let you define how resources can be accessed on behalf of the user with a given access token. For example, you might choose to grant read access to the messages resource if users have the manager access level, and a write access to that resource if they have the administrator access level.

You can define allowed permissions in the Permissions view of the Auth0 Dashboard's APIs section. The following example uses the read:messages scope.

Auth0 Dashboard> Applications > APIs > [Specific API] > Permissions tab

## Install dependencies @@ -39,7 +39,7 @@ locale: en-US ## Verify the token signature {{{ data-action="code" data-code="OpenIdConnectSigningKeyResolver.cs" }}} -

The OWIN JWT middleware does not use Open ID Connect Discovery by default, so you must provide a custom IssuerSigningKeyResolver.

Create the OpenIdConnectSigningKeyResolver class and ensure to return the correct SecurityKey by implementing GetSigningKey. This class is then used as TokenValidationParameters.IssuerSigningKeyResolver while configuring the middleware in Startup.cs.

This custom resolver is deprecated and no longer available. You must provide this custom resolver yourself.

+

The OWIN JWT middleware does not use Open ID Connect Discovery by default, so you must provide a custom IssuerSigningKeyResolver.

Create the OpenIdConnectSigningKeyResolver class and ensure to return the correct SecurityKey by implementing GetSigningKey. This class is then used as TokenValidationParameters.IssuerSigningKeyResolver while configuring the middleware in Startup.cs.

This custom resolver is deprecated and no longer available. You must provide this custom resolver yourself.

## Validate scopes {{{ data-action="code" data-code="ScopeAuthorizeAttribute.cs" }}} @@ -53,6 +53,6 @@ locale: en-US
-

If your application did not start successfully:

  • Ensure your configured the ValidIssuer and ValidAudience values correctly

  • Verify you added the token as the Authorization header

  • Ensure the token has the correct scopes. Verify with jwt.io.

Still having issues? Check out our documentation or visit our community page to get more help.

+

If your application did not start successfully:

  • Ensure your configured the ValidIssuer and ValidAudience values correctly

  • Verify you added the token as the Authorization header

  • Ensure the token has the correct scopes. Verify with jwt.io.

Still having issues? Check out our documentation or visit our community page to get more help.

diff --git a/articles/quickstart/native/android-facebook-login/interactive.md b/articles/quickstart/native/android-facebook-login/interactive.md index b7e9bc7d23..1ee182e8a8 100644 --- a/articles/quickstart/native/android-facebook-login/interactive.md +++ b/articles/quickstart/native/android-facebook-login/interactive.md @@ -10,14 +10,14 @@ files: - files/exchangeTokens - files/performLogin github: - path: https://github.com/auth0-samples/auth0-android-native-social-sample/tree/master/00-login-facebook + path: 00-login-facebook locale: en-US --- # Android - Facebook Login -

This tutorial demonstrates how to add user login to an Android application using native Facebook Login. We recommend that you log in to follow this quickstart with examples configured for your account.

System requirements 

  • Android Studio 3.6.1

  • Android SDK 25

  • Emulator - Nexus 5X - Android 6.0

This tutorial describes how to implement login with the Facebook SDK.​

Before You Start

Configure your Auth0 application in the dashboard to use Facebook Native Sign In. See Add Facebook Login to Native Apps. When you finish this step, your application will be able to implement Facebook Native Login.

+

This tutorial demonstrates how to add user login to an Android application using native Facebook Login. We recommend that you log in to follow this quickstart with examples configured for your account.

System requirements 

  • Android Studio 3.6.1

  • Android SDK 25

  • Emulator - Nexus 5X - Android 6.0

This tutorial describes how to implement login with the Facebook SDK.​

Before You Start

Configure your Auth0 application in the dashboard to use Facebook Native Sign In. See Add Facebook Login to Native Apps. When you finish this step, your application will be able to implement Facebook Native Login.

## Request Facebook permissions @@ -52,7 +52,7 @@ locale: en-US ## Integrate Auth0 -

Now that the required artifacts have been obtained, you are ready to trade them for Auth0 user credentials, such as the ID and Access Tokens. But first, you must set up the Auth0 SDK to make that last request.

Get your application keys

  1. Go to the Applications section of the Auth0 Dashboard and select the existing application in which you enabled Sign in with Facebook. If you need help with this step, please check the requirements section at the top of this article.

  2. Copy the Domain and Client ID values from the application settings page. These are required by the SDK.

  3. Create two new resources in your Android application's strings.xml file to store them. The name of the keys must match the ones used below: +

    Now that the required artifacts have been obtained, you are ready to trade them for Auth0 user credentials, such as the ID and Access Tokens. But first, you must set up the Auth0 SDK to make that last request.

    Get your application keys

    1. Go to the Applications section of the Auth0 Dashboard and select the existing application in which you enabled Sign in with Facebook. If you need help with this step, please check the requirements section at the top of this article.

    2. Copy the Domain and Client ID values from the application settings page. These are required by the SDK.

    3. Create two new resources in your Android application's strings.xml file to store them. The name of the keys must match the ones used below:

      <resources>
       
      @@ -88,7 +88,7 @@ locale: en-US
       
       
      -

      However, if you do plan to support Web Authentication, head over here to learn how to declare the Manifest Placeholders.

      +

      However, if you do plan to support Web Authentication, head over here to learn how to declare the Manifest Placeholders.

      ## Exchange the received data for Auth0 tokens {{{ data-action="code" data-code="exchangeTokens" }}} diff --git a/articles/quickstart/native/android/00-login.md b/articles/quickstart/native/android/00-login.md index ac2a1c37d9..7bf426ff9c 100755 --- a/articles/quickstart/native/android/00-login.md +++ b/articles/quickstart/native/android/00-login.md @@ -65,7 +65,7 @@ Remember to synchronize using the Android Studio prompt or run `./gradlew clean Add manifest placeholders required by the SDK. The placeholders are used internally to define an `intent-filter` that captures the authentication callback URL. For this, the Auth0 tenant domain and the scheme that take part in the callback URL must be set. ::: note -We've used a value of `demo` for `auth0Scheme` here, so that a custom URL scheme can be used for the URL that Auth0 redirects to after login. Whenever possible, Auth0 recommends using Android App Links with https as a secure way to link directly to content within your app. Custom URL schemes can be subject to client impersonation attacks. You can read more about setting this value in the Auth0.Android SDK readme. +We've used a value of `demo` for `auth0Scheme` here, so that a custom URL scheme can be used for the URL that Auth0 redirects to after login. The alternative is `https` if you want to use Android App Links. You can read more about setting this value in the Auth0.Android SDK readme. ::: To add the manifest placeholders, add the next line: diff --git a/articles/quickstart/native/android/interactive.md b/articles/quickstart/native/android/interactive.md index c87e1f0135..c0bd077acb 100644 --- a/articles/quickstart/native/android/interactive.md +++ b/articles/quickstart/native/android/interactive.md @@ -7,7 +7,7 @@ files: - files/strings - files/MainActivity github: - path: https://github.com/auth0-samples/auth0-android-sample/tree/master/00-Login-Kt + path: 00-Login-Kt locale: en-US --- @@ -19,12 +19,12 @@ locale: en-US ## Configure Auth0 -

      To use Auth0 services, you need to have an application set up in the Auth0 Dashboard. The Auth0 application is where you will configure authentication in your project.

      Configure an application

      Use the interactive selector to create a new Auth0 application or select an existing application that represents the project you want to integrate with. Every application in Auth0 is assigned an alphanumeric, unique client ID that your application code will use to call Auth0 APIs through the SDK.

      Any settings you configure using this quickstart will automatically update for your Application in the Dashboard, which is where you can manage your Applications in the future.

      If you would rather explore a complete configuration, you can view a sample application instead.

      Configure callback URLs

      A callback URL is the application URL that Auth0 will direct your users to once they have authenticated. If you do not set this value, Auth0 will not return users to your application after they log in.

      If you are following along with our sample project, set this to demo://{yourDomain}/android/YOUR_APP_PACKAGE_NAME/callback.

      Configure logout URLs

      A logout URL is the application URL Auth0 will redirect your users to once they log out. If you do not set this value, users will not be able to log out from your application and will receive an error.

      If you are following along with our sample project, set this to demo://{yourDomain}/android/YOUR_APP_PACKAGE_NAME/callback

      +

      To use Auth0 services, you need to have an application set up in the Auth0 Dashboard. The Auth0 application is where you will configure authentication in your project.

      Configure an application

      Use the interactive selector to create a new Auth0 application or select an existing application that represents the project you want to integrate with. Every application in Auth0 is assigned an alphanumeric, unique client ID that your application code will use to call Auth0 APIs through the SDK.

      Any settings you configure using this quickstart will automatically update for your Application in the Dashboard, which is where you can manage your Applications in the future.

      If you would rather explore a complete configuration, you can view a sample application instead.

      Configure callback URLs

      A callback URL is the application URL that Auth0 will direct your users to once they have authenticated. If you do not set this value, Auth0 will not return users to your application after they log in.

      If you are following along with our sample project, set this to demo://{yourDomain}/android/YOUR_APP_PACKAGE_NAME/callback.

      Configure logout URLs

      A logout URL is the application URL Auth0 will redirect your users to once they log out. If you do not set this value, users will not be able to log out from your application and will receive an error.

      If you are following along with our sample project, set this to demo://{yourDomain}/android/YOUR_APP_PACKAGE_NAME/callback

      ## Install the Auth0 Android SDK {{{ data-action="code" data-code="build.gradle#18:18" }}} -

      Add the Auth0 Android SDK into your project. The library will make requests to the Auth0's Authentication and Management APIs.

      In your app's build.gradle dependencies section, add the following:

      implementation 'com.auth0.android:auth0:2.+'
      +

      Add the Auth0 Android SDK into your project. The library will make requests to the Auth0's Authentication and Management APIs.

      In your app's build.gradle dependencies section, add the following:

      implementation 'com.auth0.android:auth0:2. '
       
       
      @@ -33,107 +33,46 @@ locale: en-US ## Add manifest placeholders {{{ data-action="code" data-code="build.gradle#10:12" }}} -

      The SDK requires manifest placeholders. Auth0 uses placeholders internally to define an intent-filter, which captures the authentication callback URL. You must set Auth0 tenant domain and the callback URL scheme.

      You do not need to declare a specific intent-filter for your activity, because you have defined the manifest placeholders with your Auth0 Domain and Scheme values and the library will handle the redirection for you.

      We've used a value of demo for auth0Scheme here, so that a custom URL scheme can be used for the URL that Auth0 redirects to after login. Whenever possible, Auth0 recommends using Android App Links with https as a secure way to link directly to content within your app. Custom URL schemes can be subject to client impersonation attacks. You can read more about setting this value in the Auth0.Android SDK readme.

      +

      The SDK requires manifest placeholders. Auth0 uses placeholders internally to define an intent-filter, which captures the authentication callback URL. You must set Auth0 tenant domain and the callback URL scheme.

      You do not need to declare a specific intent-filter for your activity, because you have defined the manifest placeholders with your Auth0 Domain and Scheme values and the library will handle the redirection for you.

      We've used a value of demo for auth0Scheme here, so that a custom URL scheme can be used for the URL that Auth0 redirects to after login. The alternative is https if you want to use Android App Links. You can read more about setting this value in the Auth0.Android SDK README.

      ## Configure your application {{{ data-action="code" data-code="strings.xml#2:3" }}} -

      For the SDK to function properly, you must set the following properties in strings.xml:

      • com_auth0_domain: The domain of your Auth0 tenant. Generally, you can find this in the Auth0 Dashboard under your Application's Settings in the Domain field. If you are using a custom domain, you should set this to the value of your custom domain instead.

      • com_auth0_client_id: The ID of the Auth0 Application you set up earlier in this quickstart. You can find this in the Auth0 Dashboard under your Application's Settings in the Client ID field.

      Ensure that the AndroidManifest.xml file specifies the android.permissions.INTERNET permission:

      <uses-permission android:name="android.permission.INTERNET" />
      +

      For the SDK to function properly, you must set the following properties in strings.xml:

      • com_auth0_domain: The domain of your Auth0 tenant. Generally, you can find this in the Auth0 Dashboard under your Application's Settings in the Domain field. If you are using a custom domain, you should set this to the value of your custom domain instead.

      • com_auth0_client_id: The ID of the Auth0 Application you set up earlier in this quickstart. You can find this in the Auth0 Dashboard under your Application's Settings in the Client ID field.

      Ensure that the AndroidManifest.xml file specifies the android.permissions.INTERNET permission:

      <uses-permission android:name="android.permission.INTERNET" />
       
       
      -

      Run Sync Project with Gradle Files inside Android Studio or execute ./gradlew clean assembleDebug from the command line.

      For more information about using Gradle, check the Gradle official documentation.

      +

      Run Sync Project with Gradle Files inside Android Studio or execute ./gradlew clean assembleDebug from the command line.

      For more information about using Gradle, check the Gradle official documentation.

      ## Add login to your application {{{ data-action="code" data-code="MainActivity.kt#6:38" }}} -

      Universal Login is the easiest way to set up authentication in your application. We recommend using it for the best experience, best security and the fullest array of features.

      In the onCreate method, create a new instance of the Auth0 class to hold user credentials.

      Create a loginWithBrowser method and use the WebAuthProvider class to authenticate with any connection you enabled on your application in the Auth0 dashboard. Here, you can pass the scheme value that was used in the auth0Scheme manifest placeholder as part of the initial configuration.

      After you call the WebAuthProvider#start function, the browser launches and shows the login page. Once the user authenticates, the callback URL is called. The callback URL contains the final result of the authentication process.

      Android Quickstart step 5 checkpoint

      Add a button to your application that calls loginWithBrowser. When you click it, verify that your Android application redirects you to the Auth0 Universal Login page and that you can now log in or sign up using a username and password or a social provider.

      Once that's complete, verify that Auth0 redirects back to your app.

      +

      Universal Login is the easiest way to set up authentication in your application. We recommend using it for the best experience, best security and the fullest array of features.

      In the onCreate method, create a new instance of the Auth0 class to hold user credentials.

      Create a loginWithBrowser method and use the WebAuthProvider class to authenticate with any connection you enabled on your application in the Auth0 dashboard. Here, you can pass the scheme value that was used in the auth0Scheme manifest placeholder as part of the initial configuration.

      After you call the WebAuthProvider#start function, the browser launches and shows the login page. Once the user authenticates, the callback URL is called. The callback URL contains the final result of the authentication process.

      Android Quickstart step 5 checkpoint

      Add a button to your application that calls loginWithBrowser. When you click it, verify that your Android application redirects you to the Auth0 Universal Login page and that you can now log in or sign up using a username and password or a social provider.

      Once that's complete, verify that Auth0 redirects back to your app.

      -

      If your application did not launch successfully:

      • Ensure you set the Allowed Callback URLs are correct

      • Verify you saved your changes after entering your URLs

      • Make sure the domain and cliend ID values imported correctly

      Still having issues? Check out our documentation or visit our community page to get more help.

      +

      If your application did not launch successfully:

      • Ensure you set the Allowed Callback URLs are correct

      • Verify you saved your changes after entering your URLs

      • Make sure the domain and cliend ID values imported correctly

      Still having issues? Check out our documentation or visit our community page to get more help.

      -- `com_auth0_domain`: The domain of your Auth0 tenant. Generally, you can find this in the Auth0 Dashboard under your Application's Settings in the Domain field. If you are using a custom domain, you should set this to the value of your custom domain instead. -- `com_auth0_client_id`: The ID of the Auth0 Application you set up earlier in this quickstart. You can find this in the Auth0 Dashboard under your Application's Settings in the Client ID field. +## Add logout to your application {{{ data-action="code" data-code="MainActivity.kt#40:52" }}} -Ensure that the `AndroidManifest.xml` file specifies the `android.permissions.INTERNET` permission: -```xml - -``` +

      Use WebAuthProvider to remove the cookie set by the browser at authentication time, so that the users are forced to re-enter their credentials the next time they try to authenticate.

      Add a logout method to your app to remove the user's session and log them out of the app. Here, you can pass the scheme value that was used in the auth0Scheme manifest placeholder as part of the initial configuration.

      Use the WebAuthProvider class to implement logout. This call opens the browser and navigates the user to the logout endpoint. If the user cancels the logout, consider redirected the user to their previous URL.

      Android Quickstart Step 6 Checkpoint

      Add a button to your app that calls logout and logs the user out of your application. When you click it, verify that your Android app redirects you logout page and back again, and that you are no longer logged in to your application.

      -Run **Sync Project with Gradle Files** inside Android Studio or execute `./gradlew clean assembleDebug` from the command line. - -::: note -For more information about using Gradle, check the Gradle official documentation. -::: - -## Add login to your application {{{ data-action=code data-code="MainActivity.kt#6:38" }}} - -Universal Login is the easiest way to set up authentication in your application. We recommend using it for the best experience, best security and the fullest array of features. - -In the `onCreate` method, create a new instance of the `Auth0` class to hold user credentials. - -Create a `loginWithBrowser` method and use the `WebAuthProvider` class to authenticate with any connection you enabled on your application in the Auth0 dashboard. Here, you can pass the scheme value that was used in the `auth0Scheme` manifest placeholder as part of the initial configuration. - -After you call the `WebAuthProvider#start` function, the browser launches and shows the login page. Once the user authenticates, the callback URL is called. The callback URL contains the final result of the authentication process. - -::::checkpoint - -:::checkpoint-default - -Add a button to your application that calls `loginWithBrowser`. When you click it, verify that your Android application redirects you to the Auth0 Universal Login page and that you can now log in or sign up using a username and password or a social provider. - -Once that's complete, verify that Auth0 redirects back to your app. - -::: - -:::checkpoint-failure - -If your application did not launch successfully: -* Ensure you set the Allowed Callback URLs are correct -* Verify you saved your changes after entering your URLs -* Make sure the domain and cliend ID values imported correctly - -Still having issues? Check out our documentation or visit our community page to get more help. - -::: -:::: - -## Add logout to your application {{{ data-action=code data-code="MainActivity.kt#40:52" }}} - -Use `WebAuthProvider` to remove the cookie set by the browser at authentication time, so that the users are forced to re-enter their credentials the next time they try to authenticate. - -Add a `logout` method to your app to remove the user's session and log them out of the app. Here, you can pass the scheme value that was used in the `auth0Scheme` manifest placeholder as part of the initial configuration. - -Use the `WebAuthProvider` class to implement logout. This call opens the browser and navigates the user to the logout endpoint. If the user cancels the logout, consider redirected the user to their previous URL. -::::checkpoint - -:::checkpoint-default - -Add a button to your app that calls `logout` and logs the user out of your application. When you click it, verify that your Android app redirects you logout page and back again, and that you are no longer logged in to your application. - -::: - -:::checkpoint-failure -If your application did not logout successfully: -* Ensure the Allowed Logout URLs are set properly -* Verify you saved your changes after entering your URLs +
      -Still having issues? Check out our documentation or visit our community page to get more help. +

      If your application did not logout successfully:

      • Ensure the Allowed Logout URLs are set properly

      • Verify you saved your changes after entering your URLs

      Still having issues? Check out our documentation or visit our community page to get more help.

      -::: -:::: +

      ## Show user profile information {{{ data-action="code" data-code="MainActivity.kt#54:70" }}} -

      Use the AuthenticationAPIClient class to retrieve the user's profile from Auth0. This requires:

      • The access token returned from the login phase

      • The WebAuthProvider.login must contain the profile scope

      You must specify the email scope if you need to retrieve the user's email address.

      This quickstart sets the openid profile email scopes by default during the login step above.

      The following demonstrates a function that can be used to retrieve the user's profile and show it on the screen:

      Android Quickstart step 7 checkpoint

      Call the showUserProfile function after login. Verify the onSuccess callback returns the user's profile information.

      +

      Use the AuthenticationAPIClient class to retrieve the user's profile from Auth0. This requires:

      • The access token returned from the login phase

      • The WebAuthProvider.login must contain the profile scope

      You must specify the email scope if you need to retrieve the user's email address.

      This quickstart sets the openid profile email scopes by default during the login step above.

      The following demonstrates a function that can be used to retrieve the user's profile and show it on the screen:

      Android Quickstart step 7 checkpoint

      Call the showUserProfile function after login. Verify the onSuccess callback returns the user's profile information.

      -

      If your application did not return user profile information:

      • Verify the accessToken is valid

      Still having issues? Check out our documentation or visit our community page to get more help.

      +

      If your application did not return user profile information:

      • Verify the accessToken is valid

      Still having issues? Check out our documentation or visit our community page to get more help.

      diff --git a/articles/quickstart/native/device/interactive.md b/articles/quickstart/native/device/interactive.md index 78e12e8551..de9d4b8af9 100644 --- a/articles/quickstart/native/device/interactive.md +++ b/articles/quickstart/native/device/interactive.md @@ -3,40 +3,38 @@ title: Device Authorization Flow description: This tutorial demonstrates how to call your API from an input-constrained device using the Device Authorization Flow. interactive: true -github: - path: https://auth0.github.io/device-flow-playground/ locale: en-US --- # Device Authorization Flow -

      This tutorial demonstrates how to call your API from an input-constrained device using the Device Authorization Flow. We recommend that you log in to follow this quickstart with examples configured for your account.

      For an interactive experience, you can use the Device Flow Playground.

      Prerequisites

      +

      This tutorial demonstrates how to call your API from an input-constrained device using the Device Authorization Flow. We recommend that you log in to follow this quickstart with examples configured for your account.

      For an interactive experience, you can use the Device Flow Playground.

      Prerequisites

      ## Request device code -

      When the user starts the device application and wants to authorize it, your application must request a device code from the Auth0 Authentication API to associate with the user session.

      To get the device code, your application must call the Authentication API Device Authorization Flow Authorize endpoint:

      
      +

      When the user starts the device application and wants to authorize it, your application must request a device code from the Auth0 Authentication API to associate with the user session.

      To get the device code, your application must call the Authentication API Device Authorization Flow Authorize endpoint:

      
       
       
      - + -
      curl --request post \
      +  
      curl --request post \
       
         --url 'https://${account.namespace}/oauth/device/code' \
       
      -  --header 'content-type: application/x-www-form-urlencoded'
      var client = new RestClient("https://${account.namespace}/oauth/device/code");
      +  --header 'content-type: application/x-www-form-urlencoded'
      var client = new RestClient("https://${account.namespace}/oauth/device/code");
       
       var request = new RestRequest(Method.POST);
       
       request.AddHeader("content-type", "application/x-www-form-urlencoded");
       
      -IRestResponse response = client.Execute(request);
      package main
      +IRestResponse response = client.Execute(request);
      package main
       
       
       
      @@ -84,11 +82,11 @@ func main() {
       
       
       
      -}
      HttpResponse<String> response = Unirest.post("https://${account.namespace}/oauth/device/code")
      +}
      HttpResponse<String> response = Unirest.post("https://${account.namespace}/oauth/device/code")
       
         .header("content-type", "application/x-www-form-urlencoded")
       
      -  .asString();
      var axios = require("axios").default;
      +  .asString();
      var axios = require("axios").default;
       
       
       
      @@ -112,7 +110,7 @@ axios.request(options).then(function (response) {
       
         console.error(error);
       
      -});
      #import <Foundation/Foundation.h>
      +});
      #import <Foundation/Foundation.h>
       
       
       
      @@ -152,7 +150,7 @@ NSURLSessionDataTask *dataTask = [session dataTaskWithRequest:request
       
                                                   }];
       
      -[dataTask resume];
      $curl = curl_init();
      +[dataTask resume];
      $curl = curl_init();
       
       
       
      @@ -200,7 +198,7 @@ if ($err) {
       
         echo $response;
       
      -}
      import http.client
      +}
      import http.client
       
       
       
      @@ -222,7 +220,7 @@ data = res.read()
       
       
       
      -print(data.decode("utf-8"))
      require 'uri'
      +print(data.decode("utf-8"))
      require 'uri'
       
       require 'net/http'
       
      @@ -250,7 +248,7 @@ request["content-type"] = 'application/x-www-form-urlencoded'
       
       response = http.request(request)
       
      -puts response.read_body
      import Foundation
      +puts response.read_body
      import Foundation
       
       
       
      @@ -327,7 +325,7 @@ dataTask.resume()
      ## Poll the token endpoint -

      While your device application waits for the user to activate it, it should call the Authentication API POST /oauth/token endpoint intermittently and handle the response appropriately.

      Ensure your device application waits for the length of the interval (in seconds) or until it receives a successful response, whichever is longer, to avoid network latency issues.

      curl --request POST \ 
      +

      While your device application waits for the user to activate it, it should call the Authentication API POST /oauth/token endpoint intermittently and handle the response appropriately.

      Ensure your device application waits for the length of the interval (in seconds) or until it receives a successful response, whichever is longer, to avoid network latency issues.

      curl --request POST \ 
       
       --url 'https://${account.namespace}/oauth/token' \ 
       
      @@ -367,7 +365,7 @@ dataTask.resume()
      -

      You should validate your tokens before saving them. To learn how, read Validate Access Tokens and Validate ID Tokens.

      Access tokens are used to call the Authentication API Get User Info endpoint (if your device application requested the openid scope) or the API that was specified by the audience parameter. If you are calling your own API, your device application must verify the access token before using it.

      ID tokens contain user information that must be decoded and extracted. The Authentication API only returns an id_token if your device application requested the openid scope.

      Refresh tokens are used to obtain a new access token or ID token after the previous one has expired. The Authentication API only returns a refresh_token if the Allow Offline Access setting is enabled for the API specified by the audience parameter, and your device application requested the offline_access scope.

      +

      You should validate your tokens before saving them. To learn how, read Validate Access Tokens and Validate ID Tokens.

      Access tokens are used to call the Authentication API Get User Info endpoint (if your device application requested the openid scope) or the API that was specified by the audience parameter. If you are calling your own API, your device application must verify the access token before using it.

      ID tokens contain user information that must be decoded and extracted. The Authentication API only returns an id_token if your device application requested the openid scope.

      Refresh tokens are used to obtain a new access token or ID token after the previous one has expired. The Authentication API only returns a refresh_token if the Allow Offline Access setting is enabled for the API specified by the audience parameter, and your device application requested the offline_access scope.

      ## Call your API @@ -387,7 +385,7 @@ dataTask.resume()
## Refresh tokens -

To get a new access token for a user, your device application can call the Authentication API POST /oauth/token endpoint with the refresh_token parameter.

curl --request POST \
+

To get a new access token for a user, your device application can call the Authentication API POST /oauth/token endpoint with the refresh_token parameter.

curl --request POST \
 
   --url 'https://${account.namespace}/oauth/token' \
 
@@ -419,7 +417,7 @@ dataTask.resume()
-

To learn more about refresh tokens, read Refresh Tokens.

+

To learn more about refresh tokens, read Refresh Tokens.

## Troubleshooting @@ -553,9 +551,9 @@ dataTask.resume()
## Sample implementations -

Refer to the samples below to learn how to implement this flow in real-world applications.

  • Device Authorization Playground

  • AppleTV (Swift): Simple application that shows how Auth0 can be used with the Device Authorization Flow from an AppleTV.

  • CLI (Node.js): Sample implementation of a CLI that uses the Device Authorization Flow instead of the Authorization Code Flow. The major difference is that your CLI does not need to host a webserver and listen on a port.

+

Refer to the samples below to learn how to implement this flow in real-world applications.

  • Device Authorization Playground

  • AppleTV (Swift): Simple application that shows how Auth0 can be used with the Device Authorization Flow from an AppleTV.

  • CLI (Node.js): Sample implementation of a CLI that uses the Device Authorization Flow instead of the Authorization Code Flow. The major difference is that your CLI does not need to host a webserver and listen on a port.

## Limitations -

To use the Device Authorization Flow, a device application must:

In addition, the Device Authorization Flow does not allow:

+

To use the Device Authorization Flow, a device application must:

In addition, the Device Authorization Flow does not allow:

diff --git a/articles/quickstart/native/flutter/01-login.md b/articles/quickstart/native/flutter/01-login.md index ab8b38946f..8971094be3 100644 --- a/articles/quickstart/native/flutter/01-login.md +++ b/articles/quickstart/native/flutter/01-login.md @@ -46,12 +46,9 @@ If the callback and logout URLs are not set, users will be unable to log in and Go to the settings page of your Auth0 application and add the following URLs to **Allowed Callback URLs** and **Allowed Logout URLs**, depending on the platform of your app. If you have a custom domain, use this instead of the Auth0 domain from the settings page. ::: note -On Android, the value of the `SCHEME` placeholder can be `https` or some other custom scheme. Whenever possible, Auth0 recommends using Android App Links with `https` as a secure way to link directly to content within your app. Custom URL schemes can be subject to client impersonation attacks. +On Android, the value of the `SCHEME` placeholder can be `https` or some other custom scheme. `https` schemes require enabling Android App Links. On iOS 17.4+ and macOS 14.4+ it is possible to use Universal Links (`https` scheme) as callback and logout URLs. When enabled, the SDK will fall back to using a custom URL scheme on older iOS / macOS versions –your app's bundle identifier. - -Whenever possible, Auth0 recommends using Universal Links as a secure way to link directly to content within your iOS app. Custom URL schemes can be subject to [client impersonation attacks](https://datatracker.ietf.org/doc/html/rfc8252#section-8.6). - **This feature requires Xcode 15.3+ and a paid Apple Developer account**. ::: diff --git a/articles/quickstart/native/flutter/_configure_urls_interactive.md b/articles/quickstart/native/flutter/_configure_urls_interactive.md index cbdfaf2342..a810e4bb68 100644 --- a/articles/quickstart/native/flutter/_configure_urls_interactive.md +++ b/articles/quickstart/native/flutter/_configure_urls_interactive.md @@ -17,12 +17,9 @@ The callback and logout URLs are the URLs that Auth0 invokes to redirect back to Set the callback and logout URLs to the following values, depending on your platform. ::: note -On Android, the value of the `SCHEME` placeholder can be `https` or some other custom scheme. Whenever possible, Auth0 recommends using Android App Links with `https` as a secure way to link directly to content within your app. Custom URL schemes can be subject to client impersonation attacks. +On Android, the value of the `SCHEME` placeholder can be `https` or some other custom scheme. `https` schemes require enabling Android App Links. On iOS 17.4+ and macOS 14.4+ it is possible to use Universal Links (`https` scheme) as callback and logout URLs. When enabled, the SDK will fall back to using a custom URL scheme on older iOS / macOS versions –your app's bundle identifier. - -Whenever possible, Auth0 recommends using Universal Links as a secure way to link directly to content within your iOS app. Custom URL schemes can be subject to [client impersonation attacks](https://datatracker.ietf.org/doc/html/rfc8252#section-8.6). - **This feature requires Xcode 15.3+ and a paid Apple Developer account**. ::: diff --git a/articles/quickstart/native/flutter/interactive.md b/articles/quickstart/native/flutter/interactive.md index 20cf5141a4..4324537d19 100644 --- a/articles/quickstart/native/flutter/interactive.md +++ b/articles/quickstart/native/flutter/interactive.md @@ -7,19 +7,19 @@ files: - files/main_view - files/profile_view github: - path: https://github.com/auth0-samples/auth0-flutter-samples/tree/main/sample + path: sample locale: en-US --- # Add Login to Your Flutter Application -

Auth0 allows you to quickly add authentication and access user profile information in your app. This guide demonstrates how to integrate Auth0 with a Flutter app using the Auth0 Flutter SDK.

The Flutter SDK currently only supports Flutter apps for Android, iOS, and macOS.

This quickstart assumes you already have a Flutter app up and running. If not, check out the Flutter "getting started" guides to get started with a simple app.

You should also be familiar with the Flutter command line tool.

New to Auth? Learn How Auth0 works, how it integrates with Single-Page Applications and which protocol it uses.

+

Auth0 allows you to quickly add authentication and access user profile information in your app. This guide demonstrates how to integrate Auth0 with a Flutter app using the Auth0 Flutter SDK.

The Flutter SDK currently only supports Flutter apps for Android, iOS, and macOS.

This quickstart assumes you already have a Flutter app up and running. If not, check out the Flutter "getting started" guides to get started with a simple app.

You should also be familiar with the Flutter command line tool.

New to Auth? Learn How Auth0 works, how it integrates with Single-Page Applications and which protocol it uses.

## Configure Auth0 -

To use Auth0 services, you need to have an application set up in the Auth0 Dashboard. The Auth0 application is where you will configure how you want authentication to work for your project.

Configure an Auth0 application

Use the interactive selector to create a new Auth0 application or select an existing Native Auth0 application. Every application in Auth0 is assigned an alphanumeric, unique client ID that your application code will use to call Auth0 APIs through the SDK.

Any settings you configure using this quickstart will automatically update for your application in the Dashboard, which is where you can manage your applications in the future.

If you would rather explore a complete configuration, you can view a sample app instead.

Configure the callback and logout URLs

The callback and logout URLs are the URLs that Auth0 invokes to redirect back to your app. Auth0 invokes the callback URL after authenticating the user, and the logout URL after removing the session cookie. If the callback and logout URLs are not set, users will be unable to log in and out of the app and will get an error.

Set the callback and logout URLs to the following values, depending on your platform.

On Android, the value of the SCHEME placeholder can be https or some other custom scheme. https schemes require enabling Android App Links.

On iOS 17.4+ and macOS 14.4+ it is possible to use Universal Links (https scheme) as callback and logout URLs. When enabled, the SDK will fall back to using a custom URL scheme on older iOS / macOS versions –your app's bundle identifier. This feature requires Xcode 15.3+ and a paid Apple Developer account.

Android

SCHEME://${account.namespace}/android/YOUR_PACKAGE_NAME/callback

iOS

https://${account.namespace}/ios/YOUR_BUNDLE_IDENTIFIER/callback, +

To use Auth0 services, you need to have an application set up in the Auth0 Dashboard. The Auth0 application is where you will configure how you want authentication to work for your project.

Configure an Auth0 application

Use the interactive selector to create a new Auth0 application or select an existing Native Auth0 application. Every application in Auth0 is assigned an alphanumeric, unique client ID that your application code will use to call Auth0 APIs through the SDK.

Any settings you configure using this quickstart will automatically update for your application in the Dashboard, which is where you can manage your applications in the future.

If you would rather explore a complete configuration, you can view a sample app instead.

Configure the callback and logout URLs

The callback and logout URLs are the URLs that Auth0 invokes to redirect back to your app. Auth0 invokes the callback URL after authenticating the user, and the logout URL after removing the session cookie. If the callback and logout URLs are not set, users will be unable to log in and out of the app and will get an error.

Set the callback and logout URLs to the following values, depending on your platform.

On Android, the value of the SCHEME placeholder can be https or some other custom scheme. https schemes require enabling Android App Links.

On iOS 17.4+ and macOS 14.4+ it is possible to use Universal Links (https scheme) as callback and logout URLs. When enabled, the SDK will fall back to using a custom URL scheme on older iOS / macOS versions –your app's bundle identifier. This feature requires Xcode 15.3+ and a paid Apple Developer account.

Android

SCHEME://${account.namespace}/android/YOUR_PACKAGE_NAME/callback

iOS

https://${account.namespace}/ios/YOUR_BUNDLE_IDENTIFIER/callback, YOUR_BUNDLE_IDENTIFIER://${account.namespace}/ios/YOUR_BUNDLE_IDENTIFIER/callback

macOS

https://${account.namespace}/macos/YOUR_BUNDLE_IDENTIFIER/callback, @@ -35,41 +35,12 @@ com.example.MyApp://example.us.auth0.com/ios/com.example.MyApp/callbackIf you are not developing for the Android platform, skip this step.

The SDK requires manifest placeholders. Auth0 uses placeholders internally to define an intent-filter, which captures the authentication callback URL. You must set the Auth0 tenant domain and the callback URL scheme.

The sample uses the following placeholders:

  • auth0Domain: The domain of your Auth0 tenant. Generally, you find this in the Auth0 Dashboard under your Application Settings in the Domain field. If you are using a custom domain, you should set this to the value of your custom domain instead.

  • auth0Scheme: The scheme to use. Can be a custom scheme, or https if you want to use Android App Links. You can read more about setting this value in the Auth0.Android SDK README.

You do not need to declare a specific intent-filter for your activity because you defined the manifest placeholders with your Auth0 Domain and Scheme values. The library handles the redirection for you.

Run Sync Project with Gradle Files inside Android Studio to apply your changes.

+

If you are not developing for the Android platform, skip this step.

The SDK requires manifest placeholders. Auth0 uses placeholders internally to define an intent-filter, which captures the authentication callback URL. You must set the Auth0 tenant domain and the callback URL scheme.

The sample uses the following placeholders:

  • auth0Domain: The domain of your Auth0 tenant. Generally, you find this in the Auth0 Dashboard under your Application Settings in the Domain field. If you are using a custom domain, you should set this to the value of your custom domain instead.

  • auth0Scheme: The scheme to use. Can be a custom scheme, or https if you want to use Android App Links. You can read more about setting this value in the Auth0.Android SDK README.

You do not need to declare a specific intent-filter for your activity because you defined the manifest placeholders with your Auth0 Domain and Scheme values. The library handles the redirection for you.

Run Sync Project with Gradle Files inside Android Studio to apply your changes.

## Configure iOS/macOS -If you are not developing for the iOS or macOS platforms, skip this step. -::: warning -This step requires a paid Apple Developer account. It is needed to use Universal Links as callback and logout URLs. Skip this step to use a custom URL scheme instead. -::: - -### Configure the Team ID and bundle identifier - -Go to the settings page of your Auth0 application, scroll to the end, and open **Advanced Settings > Device Settings**. In the **iOS** section, set **Team ID** to your Apple Team ID, and **App ID** to your app's bundle identifier. - -

Screenshot of the iOS section inside the Auth0 application settings page

- -This will add your app to your Auth0 tenant's `apple-app-site-association` file. - -### Add the associated domain capability - -Open your app in Xcode by running `open ios/Runner.xcworkspace` (or `open macos/Runner.xcworkspace` for macOS). Go to the **Signing and Capabilities** tab of the **Runner** target settings, and press the **+ Capability** button. Then select **Associated Domains**. - -

Screenshot of the capabilities library inside Xcode

- -Next, add the following entry under **Associated Domains**: - -```text -webcredentials:${account.namespace} -``` - -If you have a custom domain, use this instead of the Auth0 domain from the settings page. - -::: note -For the associated domain to work, your app must be signed with your team certificate **even when building for the iOS simulator**. Make sure you are using the Apple Team whose Team ID is configured in the settings page of your Auth0 application. -::: +

If you are not developing for the iOS or macOS platforms, skip this step.

This step requires a paid Apple Developer account. It is needed to use Universal Links as callback and logout URLs. Skip this step to use a custom URL scheme instead.

Configure the Team ID and bundle identifier

Go to the settings page of your Auth0 application, scroll to the end, and open Advanced Settings > Device Settings. In the iOS section, set Team ID to your Apple Team ID, and App ID to your app's bundle identifier.

This will add your app to your Auth0 tenant's apple-app-site-association file.

Add the associated domain capability

Open your app in Xcode by running open ios/Runner.xcworkspace (or open macos/Runner.xcworkspace for macOS). Go to the Signing and Capabilities tab of the Runner target settings, and press the + Capability button. Then select Associated Domains.

Next, add the following entry under Associated Domains:

webcredentials:${account.namespace}

For the associated domain to work, your app must be signed with your team certificate even when building for the iOS simulator. Make sure you are using the Apple Team whose Team ID is configured in the settings page of your Auth0 application.

## Add login to your application {{{ data-action="code" data-code="main_view.dart#29:40" }}} @@ -78,7 +49,7 @@ For the associated domain to work, your app must be signed with your team certif
-

If your app did not launch successfully:

  • Ensure you set the Allowed Callback URLs are correct

  • Verify you saved your changes after entering your URLs

  • Make sure the domain and client ID values are imported correctly

  • If using Android, ensure that the manifest placeholders have been set up correctly, otherwise the redirect back to your app may not work

Still having issues? Check out our documentation or visit our community page to get more help.

+

If your app did not launch successfully:

  • Ensure you set the Allowed Callback URLs are correct

  • Verify you saved your changes after entering your URLs

  • Make sure the domain and client ID values are imported correctly

  • If using Android, ensure that the manifest placeholders have been set up correctly, otherwise the redirect back to your app may not work

Still having issues? Check out our documentation or visit our community page to get more help.

@@ -89,7 +60,7 @@ For the associated domain to work, your app must be signed with your team certif
-

If your app did not log out successfully:

  • Ensure the Allowed Logout URLs are set properly

  • Verify you saved your changes after entering your URLs

Still having issues? Check out our documentation or visit our community page to get more help.

+

If your app did not log out successfully:

  • Ensure the Allowed Logout URLs are set properly

  • Verify you saved your changes after entering your URLs

Still having issues? Check out our documentation or visit our community page to get more help.

@@ -100,6 +71,6 @@ For the associated domain to work, your app must be signed with your team certif
-

If your app did not return user profile information:

  • Verify the access token is valid

Still having issues? Check out our documentation or visit our community page to get more help.

+

If your app did not return user profile information:

  • Verify the access token is valid

Still having issues? Check out our documentation or visit our community page to get more help.

diff --git a/articles/quickstart/native/ionic-angular/interactive.md b/articles/quickstart/native/ionic-angular/interactive.md index 9528c94eb4..f2839fd570 100644 --- a/articles/quickstart/native/ionic-angular/interactive.md +++ b/articles/quickstart/native/ionic-angular/interactive.md @@ -9,62 +9,45 @@ files: - files/logout-button - files/user-profile github: - path: https://github.com/auth0-samples/auth0-ionic-samples/tree/main/angular + path: angular locale: en-US --- # Add Login to Your Ionic Angular with Capacitor Application -

Auth0 allows you to quickly add authentication and access user profile information in your application. This guide demonstrates how to integrate Auth0 with an Ionic (Angular) & Capacitor application using the Auth0 Angular SDK.

+

Auth0 allows you to quickly add authentication and access user profile information in your application. This guide demonstrates how to integrate Auth0 with an Ionic (Angular) & Capacitor application using the Auth0 Angular SDK.

## Getting started -

This quickstart assumes you already have an Ionic application up and running with Capacitor. If not, check out the Using Capacitor with Ionic Framework guide to get started with a simple app, or clone our sample apps.

You should also be familiar with the Capacitor development workflow.

+

This quickstart assumes you already have an Ionic application up and running with Capacitor. If not, check out the Using Capacitor with Ionic Framework guide to get started with a simple app, or clone our sample apps.

You should also be familiar with the Capacitor development workflow.

## Configure Auth0 -

To use Auth0 services, you need to have an application set up in the Auth0 Dashboard. The Auth0 application is where you will configure how you want authentication to work for your project.

Throughout this article, YOUR_PACKAGE_ID is your application's package ID. This can be found and configured in the appId field in your capacitor.config.ts file. See Capacitor's Config schema for more info.

Configure an application

Use the interactive selector to create a new Auth0 application or select an existing application that represents the project you want to integrate with. Every application in Auth0 is assigned an alphanumeric, unique client ID that your application code will use to call Auth0 APIs through the SDK.

Any settings you configure using this quickstart will automatically update for your application in the Dashboard, which is where you can manage your applications in the future.

If you would rather explore a complete configuration, you can view a sample application instead.

Configure Callback URLs

A callback URL is a URL in your application that you would like Auth0 to redirect users to after they have authenticated. If not set, users will not be returned to your application after they log in.

If you are following along with our sample project, set this to:

YOUR_PACKAGE_ID://{yourDomain}/capacitor/YOUR_PACKAGE_ID/callback

Configure Logout URLs

A logout URL is a URL in your application that you would like Auth0 to redirect users to after they have logged out. If not set, users will not be able to log out from your application and will receive an error.

If you are following along with our sample project, set this to:

YOUR_PACKAGE_ID://{yourDomain}/capacitor/YOUR_PACKAGE_ID/callback

Configure Allowed Origins

To be able to make requests from your native application to Auth0, set the following Allowed Origins in your Application Settings.

If you are following along with our sample project, set this to capacitor://localhost, http://localhost for iOS and Android respectively.

Lastly, be sure that the Application Type for your application is set to Native in the Application Settings.

+

To use Auth0 services, you need to have an application set up in the Auth0 Dashboard. The Auth0 application is where you will configure how you want authentication to work for your project.

Throughout this article, YOUR_PACKAGE_ID is your application's package ID. This can be found and configured in the appId field in your capacitor.config.ts file. See Capacitor's Config schema for more info.

Configure an application

Use the interactive selector to create a new Auth0 application or select an existing application that represents the project you want to integrate with. Every application in Auth0 is assigned an alphanumeric, unique client ID that your application code will use to call Auth0 APIs through the SDK.

Any settings you configure using this quickstart will automatically update for your application in the Dashboard, which is where you can manage your applications in the future.

If you would rather explore a complete configuration, you can view a sample application instead.

Configure Callback URLs

A callback URL is a URL in your application that you would like Auth0 to redirect users to after they have authenticated. If not set, users will not be returned to your application after they log in.

If you are following along with our sample project, set this to:

YOUR_PACKAGE_ID://{yourDomain}/capacitor/YOUR_PACKAGE_ID/callback

Configure Logout URLs

A logout URL is a URL in your application that you would like Auth0 to redirect users to after they have logged out. If not set, users will not be able to log out from your application and will receive an error.

If you are following along with our sample project, set this to:

YOUR_PACKAGE_ID://{yourDomain}/capacitor/YOUR_PACKAGE_ID/callback

Configure Allowed Origins

To be able to make requests from your native application to Auth0, set the following Allowed Origins in your Application Settings.

If you are following along with our sample project, set this to capacitor://localhost, http://localhost for iOS and Android respectively.

Lastly, be sure that the Application Type for your application is set to Native in the Application Settings.

## Install the Auth0 Angular SDK -

Run the following command within your project directory to install the Auth0 Angular SDK:

npm install @auth0/auth0-angular

The SDK exposes several types that help you integrate Auth0 with your Angular application idiomatically, including a module and an authentication service.

Install Capacitor plugins

This quickstart and sample make use of some of Capacitor's official plugins. Install these into your app using the following command:

npm install @capacitor/browser @capacitor/app

  • @capacitor/browser: Allows you to interact with the device's system browser and is used to open the URL to Auth0's authorization endpoint.

  • @capacitor/app: Allows you to subscribe to high-level app events, useful for handling callbacks from Auth0.

Capacitor's Browser plugin on iOS uses SFSafariViewController, which on iOS 11+ does not share cookies with Safari on the device. This means that SSO will not work on those devices. If you need SSO, please instead use a compatible plugin that uses ASWebAuthenticationSession.

+

Run the following command within your project directory to install the Auth0 Angular SDK:

npm install @auth0/auth0-angular

The SDK exposes several types that help you integrate Auth0 with your Angular application idiomatically, including a module and an authentication service.

Install Capacitor plugins

This quickstart and sample make use of some of Capacitor's official plugins. Install these into your app using the following command:

npm install @capacitor/browser @capacitor/app

  • @capacitor/browser: Allows you to interact with the device's system browser and is used to open the URL to Auth0's authorization endpoint.

  • @capacitor/app: Allows you to subscribe to high-level app events, useful for handling callbacks from Auth0.

Capacitor's Browser plugin on iOS uses SFSafariViewController, which on iOS 11+ does not share cookies with Safari on the device. This means that SSO will not work on those devices. If you need SSO, please instead use a compatible plugin that uses ASWebAuthenticationSession.

## Register and configure the authentication module {{{ data-action="code" data-code="app.module.ts" }}} -The SDK exports `AuthModule`, a module that contains all the services required for the SDK to function. This module should be registered with your application and be configured with your Auth0 domain and Client ID. -The `AuthModule.forRoot` function takes the following configuration: +

The SDK exports AuthModule, a module that contains all the services required for the SDK to function. This module should be registered with your application and be configured with your Auth0 domain and Client ID.

The AuthModule.forRoot function takes the following configuration:

  • domain: The domain value present under the Settings of the application you created in the Auth0 Dashboard, or your custom domain if you are using Auth0's custom domains feature.

  • clientId: The Client ID value present under the Settings of the application you created in the Auth0 Dashboard.

  • useRefreshTokens: To use auth0-angular with Ionic on Android and iOS, it's required to enable refresh tokens.

  • useRefreshTokensFallback: To use auth0-angular with Ionic on Android and iOS, it's required to disable the iframe fallback.

  • authorizationParams.redirect_uri: The URL to redirect your users after they authenticate with Auth0.

To persist authentication after closing and reopening the application, you may want to set cacheLocation to localstorage when configuring the SDK, but please be aware of the risks of storing tokens in localstorage. Also, localstorage should be treated as transient in Capacitor app as the data might be recovered unexpectedly in certain circumstances. Please read the guidance on storage in the Capacitor docs.

Additionally, the SDK has the ability to use a custom cache implementation to store tokens, if you have a requirement to use a more secure and persistent storage mechanism.

Note that we recommend against using Capacitor's Storage plugin to store tokens, as this is backed by UserDefaults and SharedPreferences on iOS and Android respectively. Data stored using these APIs is not encrypted, not secure, and could also be synced to the cloud.

Ionic & Capacitor (Angular) - Step 4 - Register and configure the authentication module

Now that you have configured your app with the Auth0 Angular SDK, run your application to verify that the SDK is initializing without error, and that your application runs as it did before.

-- `domain`: The `domain` value present under the **Settings** of the application you created in the Auth0 Dashboard, or your custom domain if you are using Auth0's custom domains feature. -- `clientId`: The Client ID value present under the **Settings** of the application you created in the Auth0 Dashboard. -- `useRefreshTokens`: To use auth0-angular with Ionic on Android and iOS, it's required to enable refresh tokens. -- `useRefreshTokensFallback`: To use auth0-angular with Ionic on Android and iOS, it's required to disable the iframe fallback. -- `authorizationParams.redirect_uri`: The URL to redirect your users after they authenticate with Auth0. - -<%= include('../_includes/ionic/_note_storage') %> +
-::::checkpoint -:::checkpoint-default -Now that you have configured your app with the Auth0 Angular SDK, run your application to verify that the SDK is initializing without error, and that your application runs as it did before. -::: -:::checkpoint-failure -Sorry about that. Here's a couple things to double check: -* ensure the correct application is selected -* did you save after entering your URLs? -* make sure the domain and Client ID imported correctly +

Sorry about that. Here's a couple things to double check:

  • ensure the correct application is selected

  • did you save after entering your URLs?

  • make sure the domain and Client ID imported correctly

Still having issues? Check out our documentation or visit our community page to get more help.

-Still having issues? Check out our documentation or visit our community page to get more help. -::: -:::: +

## Add login to your application {{{ data-action="code" data-code="login-button.ts" }}} -

In a Capacitor application, the Capacitor's Browser plugin performs a redirect to the Auth0 Universal Login Page. Set the openUrl parameter on the loginWithRedirect function to use Browser.open so that the URL is opened using the device's system browser component (SFSafariViewController on iOS, and Chrome Custom Tabs on Android).

By default, the SDK's loginWithRedirect method uses window.location.href to navigate to the login page in the default browser application on the user's device rather than the system browser component appropriate for the platform. The user would leave your application to authenticate and could make for a suboptimal user experience.

Ionic & Capacitor (Angular) - Step 5 - Add login to your application

The loginWithRedirect function tells the SDK to initiate the login flow, using the Browser.open function to open the login URL with the platform's system browser component by setting the openUrl parameter. This provides a way for your user to log in to your application. Users redirect to the login page at Auth0 and do not receive any errors.

+

In a Capacitor application, the Capacitor's Browser plugin performs a redirect to the Auth0 Universal Login Page. Set the openUrl parameter on the loginWithRedirect function to use Browser.open so that the URL is opened using the device's system browser component (SFSafariViewController on iOS, and Chrome Custom Tabs on Android).

By default, the SDK's loginWithRedirect method uses window.location.href to navigate to the login page in the default browser application on the user's device rather than the system browser component appropriate for the platform. The user would leave your application to authenticate and could make for a suboptimal user experience.

Ionic & Capacitor (Angular) - Step 5 - Add login to your application

The loginWithRedirect function tells the SDK to initiate the login flow, using the Browser.open function to open the login URL with the platform's system browser component by setting the openUrl parameter. This provides a way for your user to log in to your application. Users redirect to the login page at Auth0 and do not receive any errors.

@@ -75,11 +58,11 @@ Still having issues? Check out our Once users logs in with the Universal Login Page, they redirect back to your app via a URL with a custom URL scheme. The appUrlOpen event must be handled within your app. You can call the handleRedirectCallback method from the Auth0 SDK to initialize the authentication state.

You can only use this method on a redirect from Auth0. To verify success, check for the presence of the code and state parameters in the URL.

The Browser.close() method should close the browser when this event is raised.

Note that the appUrlOpen event callback is wrapped in ngZone.run. Changes to observables that occur when handleRedirectCallback runs are picked up by the Angular app. To learn more, read Using Angular with Capacitor. Otherwise, the screen doesn't update to show the authenticated state after log in.

This article assumes you will be using Custom URL Schemes to handle the callback within your application. To do this, register your YOUR_PACKAGE_ID as a URL scheme for your chosen platform. To learn more, read Defining a Custom URL Scheme for iOS, or Create Deep Links to App Content for Android.

Ionic & Capacitor (Angular) - Step 6 - Handling the login callback

Add the appUrlOpen to your application's App component and log in. The browser window should close once the user authenticates and logs in to your app.

+

Once users logs in with the Universal Login Page, they redirect back to your app via a URL with a custom URL scheme. The appUrlOpen event must be handled within your app. You can call the handleRedirectCallback method from the Auth0 SDK to initialize the authentication state.

You can only use this method on a redirect from Auth0. To verify success, check for the presence of the code and state parameters in the URL.

The Browser.close() method should close the browser when this event is raised.

Note that the appUrlOpen event callback is wrapped in ngZone.run. Changes to observables that occur when handleRedirectCallback runs are picked up by the Angular app. To learn more, read Using Angular with Capacitor. Otherwise, the screen doesn't update to show the authenticated state after log in.

This article assumes you will be using Custom URL Schemes to handle the callback within your application. To do this, register your YOUR_PACKAGE_ID as a URL scheme for your chosen platform. To learn more, read Defining a Custom URL Scheme for iOS, or Create Deep Links to App Content for Android.

Ionic & Capacitor (Angular) - Step 6 - Handling the login callback

Add the appUrlOpen to your application's App component and log in. The browser window should close once the user authenticates and logs in to your app.

-

Sorry about that. Here's a couple things to double check:

+

Sorry about that. Here's a couple things to double check:

diff --git a/articles/quickstart/native/ionic-react/interactive.md b/articles/quickstart/native/ionic-react/interactive.md index 28cd985773..bcbed1c505 100644 --- a/articles/quickstart/native/ionic-react/interactive.md +++ b/articles/quickstart/native/ionic-react/interactive.md @@ -9,64 +9,45 @@ files: - files/app - files/user-profile github: - path: https://github.com/auth0-samples/auth0-ionic-samples/tree/main/react + path: react locale: en-US --- # Add login to your Ionic React with Capacitor app -

Auth0 allows you to quickly add authentication and gain access to user profile information in your application. This guide demonstrates how to integrate Auth0 with an Ionic (React) & Capacitor application using the Auth0 React SDK.

+

Auth0 allows you to quickly add authentication and gain access to user profile information in your application. This guide demonstrates how to integrate Auth0 with an Ionic (React) & Capacitor application using the Auth0 React SDK.

## Getting started -

This quickstart assumes you already have an Ionic application up and running with Capacitor. If not, check out the Using Capacitor with Ionic Framework guide to get started with a simple app, or clone our sample apps.

You should also be familiar with the Capacitor development workflow.

+

This quickstart assumes you already have an Ionic application up and running with Capacitor. If not, check out the Using Capacitor with Ionic Framework guide to get started with a simple app, or clone our sample apps.

You should also be familiar with the Capacitor development workflow.

## Configure Auth0 -

To use Auth0 services, you need to have an application set up in the Auth0 Dashboard. The Auth0 application is where you will configure how you want authentication to work for your project.

Throughout this article, YOUR_PACKAGE_ID is your application's package ID. This can be found and configured in the appId field in your capacitor.config.ts file. See Capacitor's Config schema for more info.

Configure an application

Use the interactive selector to create a new Auth0 application or select an existing application that represents the project you want to integrate with. Every application in Auth0 is assigned an alphanumeric, unique client ID that your application code will use to call Auth0 APIs through the SDK.

Any settings you configure using this quickstart will automatically update for your application in the Dashboard, which is where you can manage your applications in the future.

If you would rather explore a complete configuration, you can view a sample application instead.

Configure Callback URLs

A callback URL is a URL in your application that you would like Auth0 to redirect users to after they have authenticated. If not set, users will not be returned to your application after they log in.

If you are following along with our sample project, set this to:

YOUR_PACKAGE_ID://{yourTenant}.auth0.com/capacitor/YOUR_PACKAGE_ID/callback

Configure Logout URLs

A logout URL is a URL in your application that you would like Auth0 to redirect users to after they have logged out. If not set, users will not be able to log out from your application and will receive an error.

If you are following along with our sample project, set this to:

YOUR_PACKAGE_ID://{yourTenant}.auth0.com/capacitor/YOUR_PACKAGE_ID/callback.

Configure Allowed Origins

To be able to make requests from your native application to Auth0, set the following Allowed Origins in your Application Settings.

If you are following along with our sample project, set this to capacitor://localhost, http://localhost for iOS and Android respectively.

Lastly, be sure that the Application Type for your application is set to Native in the Application Settings.

+

To use Auth0 services, you need to have an application set up in the Auth0 Dashboard. The Auth0 application is where you will configure how you want authentication to work for your project.

Throughout this article, YOUR_PACKAGE_ID is your application's package ID. This can be found and configured in the appId field in your capacitor.config.ts file. See Capacitor's Config schema for more info.

Configure an application

Use the interactive selector to create a new Auth0 application or select an existing application that represents the project you want to integrate with. Every application in Auth0 is assigned an alphanumeric, unique client ID that your application code will use to call Auth0 APIs through the SDK.

Any settings you configure using this quickstart will automatically update for your application in the Dashboard, which is where you can manage your applications in the future.

If you would rather explore a complete configuration, you can view a sample application instead.

Configure Callback URLs

A callback URL is a URL in your application that you would like Auth0 to redirect users to after they have authenticated. If not set, users will not be returned to your application after they log in.

If you are following along with our sample project, set this to:

YOUR_PACKAGE_ID://{yourTenant}.auth0.com/capacitor/YOUR_PACKAGE_ID/callback

Configure Logout URLs

A logout URL is a URL in your application that you would like Auth0 to redirect users to after they have logged out. If not set, users will not be able to log out from your application and will receive an error.

If you are following along with our sample project, set this to:

YOUR_PACKAGE_ID://{yourTenant}.auth0.com/capacitor/YOUR_PACKAGE_ID/callback.

Configure Allowed Origins

To be able to make requests from your native application to Auth0, set the following Allowed Origins in your Application Settings.

If you are following along with our sample project, set this to capacitor://localhost, http://localhost for iOS and Android respectively.

Lastly, be sure that the Application Type for your application is set to Native in the Application Settings.

## Install the Auth0 React SDK -

Run the following command within your project directory to install the Auth0 React SDK:

npm install @auth0/auth0-react

The SDK exposes methods and variables that help you integrate Auth0 with your React application idiomatically using React Hooks or Higher-Order Components.

Install Capacitor plugins

This quickstart and sample make use of some of Capacitor's official plugins. Install these into your app using the following command:

npm install @capacitor/browser @capacitor/app

  • @capacitor/browser: Allows you to interact with the device's system browser and is used to open the URL to Auth0's authorization endpoint.

  • @capacitor/app: Allows you to subscribe to high-level app events, useful for handling callbacks from Auth0.

Capacitor's Browser plugin on iOS uses SFSafariViewController, which on iOS 11+ does not share cookies with Safari on the device. This means that SSO will not work on those devices. If you need SSO, please instead use a compatible plugin that uses ASWebAuthenticationSession.

+

Run the following command within your project directory to install the Auth0 React SDK:

npm install @auth0/auth0-react

The SDK exposes methods and variables that help you integrate Auth0 with your React application idiomatically using React Hooks or Higher-Order Components.

Install Capacitor plugins

This quickstart and sample make use of some of Capacitor's official plugins. Install these into your app using the following command:

npm install @capacitor/browser @capacitor/app

  • @capacitor/browser: Allows you to interact with the device's system browser and is used to open the URL to Auth0's authorization endpoint.

  • @capacitor/app: Allows you to subscribe to high-level app events, useful for handling callbacks from Auth0.

Capacitor's Browser plugin on iOS uses SFSafariViewController, which on iOS 11+ does not share cookies with Safari on the device. This means that SSO will not work on those devices. If you need SSO, please instead use a compatible plugin that uses ASWebAuthenticationSession.

## Configure the Auth0Provider component {{{ data-action="code" data-code="index.tsx" }}} -Under the hood, the Auth0 React SDK uses React Context to manage the authentication state of your users. One way to integrate Auth0 with your React app is to wrap your root component with an `Auth0Provider` you can import from the SDK. -The `Auth0Provider` component takes the following props: +

Under the hood, the Auth0 React SDK uses React Context to manage the authentication state of your users. One way to integrate Auth0 with your React app is to wrap your root component with an Auth0Provider you can import from the SDK.

The Auth0Provider component takes the following props:

  • domain: The domain value present under the Settings of the application you created in your Auth0 Dashboard, or your custom domain if using Auth0's Custom Domains feature.

  • clientId: The Client ID value present under the Settings of the application you created in your Auth0 Dashboard.

  • useRefreshTokens: To use auth0-react with Ionic on Android and iOS, it's required to enable refresh tokens.

  • useRefreshTokensFallback: To use auth0-react with Ionic on Android and iOS, it's required to disable the iframe fallback.

  • authorizationParams.redirect_uri: The URL to where you'd like to redirect your users after they authenticate with Auth0.

To persist authentication after closing and reopening the application, you may want to set cacheLocation to localstorage when configuring the SDK, but please be aware of the risks of storing tokens in localstorage. Also, localstorage should be treated as transient in Capacitor app as the data might be recovered unexpectedly in certain circumstances. Please read the guidance on storage in the Capacitor docs.

Additionally, the SDK has the ability to use a custom cache implementation to store tokens, if you have a requirement to use a more secure and persistent storage mechanism.

Note that we recommend against using Capacitor's Storage plugin to store tokens, as this is backed by UserDefaults and SharedPreferences on iOS and Android respectively. Data stored using these APIs is not encrypted, not secure, and could also be synced to the cloud.

Ionic & Capacitor (React) - Step 4 - Configure the Auth0Provider component

Add the Auth0Provider component in a way that wraps your App component, then run your application to verify that the SDK is initializing correctly and your application is not throwing any errors related to Auth0.

-- `domain`: The `domain` value present under the **Settings** of the application you created in your Auth0 Dashboard, or your custom domain if using Auth0's Custom Domains feature. -- `clientId`: The Client ID value present under the **Settings** of the application you created in your Auth0 Dashboard. -- `useRefreshTokens`: To use auth0-react with Ionic on Android and iOS, it's required to enable refresh tokens. -- `useRefreshTokensFallback`: To use auth0-react with Ionic on Android and iOS, it's required to disable the iframe fallback. -- `authorizationParams.redirect_uri`: The URL to where you'd like to redirect your users after they authenticate with Auth0. - -<%= include('../_includes/ionic/_note_storage') %> - -:::: checkpoint -:::checkpoint-default -Add the `Auth0Provider` component in a way that wraps your `App` component, then run your application to verify that the SDK is initializing correctly and your application is not throwing any errors related to Auth0. -::: - -:::checkpoint-failure -Sorry about that. Here's a couple things to double check: +
-- ensure the correct application is selected -- did you save after entering your URLs? -- make sure the domain and Client ID imported correctly +

Sorry about that. Here's a couple things to double check:

  • ensure the correct application is selected

  • did you save after entering your URLs?

  • make sure the domain and Client ID imported correctly

Still having issues? Check out our documentation or visit our community page to get more help.

-Still having issues? Check out our documentation or visit our community page to get more help. -::: -:::: +

## Add login to your application {{{ data-action="code" data-code="login-button.tsx" }}} -

In a Capacitor application, the Capacitor's Browser plugin performs a redirect to the Auth0 Universal Login Page. Set the openUrl parameter on the loginWithRedirect function to use Browser.open so that the URL is opened using the device's system browser component (SFSafariViewController on iOS, and Chrome Custom Tabs on Android).

By default, the SDK's loginWithRedirect method uses window.location.href to navigate to the login page in the default browser application on the user's device rather than the system browser component appropriate for the platform. The user would leave your application to authenticate and could make for a suboptimal user experience.

Ionic & Capacitor (React) - Step 5- Add login to your application

The loginWithRedirect function tells the SDK to initiate the login flow, using the Browser.open function to open the login URL with the platform's system browser component by setting the openUrl parameter. This provides a way for your user to log in to your application. Users redirect to the login page at Auth0 and do not receive any errors.

+

In a Capacitor application, the Capacitor's Browser plugin performs a redirect to the Auth0 Universal Login Page. Set the openUrl parameter on the loginWithRedirect function to use Browser.open so that the URL is opened using the device's system browser component (SFSafariViewController on iOS, and Chrome Custom Tabs on Android).

By default, the SDK's loginWithRedirect method uses window.location.href to navigate to the login page in the default browser application on the user's device rather than the system browser component appropriate for the platform. The user would leave your application to authenticate and could make for a suboptimal user experience.

Ionic & Capacitor (React) - Step 5- Add login to your application

The loginWithRedirect function tells the SDK to initiate the login flow, using the Browser.open function to open the login URL with the platform's system browser component by setting the openUrl parameter. This provides a way for your user to log in to your application. Users redirect to the login page at Auth0 and do not receive any errors.

@@ -77,18 +58,18 @@ Still having issues? Check out our Once users logs in with the Universal Login Page, they redirect back to your app via a URL with a custom URL scheme. The appUrlOpen event must be handled within your app. You can call the handleRedirectCallback method from the Auth0 SDK to initialize the authentication state.

You can only use this method on a redirect from Auth0. To verify success, check for the presence of the code and state parameters in the URL.

The Browser.close() method should close the browser when this event is raised.

Ionic & Capacitor (React) - Step 6 - Handle the login callback

Add the appUrlOpen to your application's App component and log in. The browser window should close once the user authenticates and logs in to your app.

+

Once users logs in with the Universal Login Page, they redirect back to your app via a URL with a custom URL scheme. The appUrlOpen event must be handled within your app. You can call the handleRedirectCallback method from the Auth0 SDK to initialize the authentication state.

You can only use this method on a redirect from Auth0. To verify success, check for the presence of the code and state parameters in the URL.

The Browser.close() method should close the browser when this event is raised.

This article assumes you will be using Custom URL Schemes to handle the callback within your application. To do this, register your YOUR_PACKAGE_ID as a URL scheme for your chosen platform. To learn more, read Defining a Custom URL Scheme for iOS, or Create Deep Links to App Content for Android.

Ionic & Capacitor (React) - Step 6 - Handle the login callback

Add the appUrlOpen to your application's App component and log in. The browser window should close once the user authenticates and logs in to your app.

-

Sorry about that. Here's a couple things to double check:

+

Sorry about that. Here's a couple things to double check:

## Add logout to your application {{{ data-action="code" data-code="logout-button.tsx" }}} -

Now that users can log in, you need to configure a way to log out. Users must redirect to the Auth0 logout endpoint in the browser to clear their browser session. Again, Capacitor's Browser plugin should perform this redirect so that the user does not leave your app and receive a suboptimal experience.

To achieve this with Ionic and Capacitor in conjunction with the Auth0 SDK:

  • Construct the URL for your app Auth0 should use to redirect to after logout. This is a URL that uses your registered custom scheme and Auth0 domain. Add it to your Allowed Logout URLs configuration in the Auth0 Dashboard

  • Logout from the SDK by calling logout, and pass your redirect URL back as the logoutParams.returnTo parameter.

  • Set the openUrl parameter to a callback that uses the Capacitor browser plugin to open the URL using Browser.open.

Similar to the login step, if you do not set openUrl when calling logout, the SDK redirects the user to the logout URL using the default browser application on the device, which provides a suboptimal user experience.

Ionic & Capacitor (React) - Step 7 - Add logout to your application

Provide a way for your users to log out of your application. Verify that you redirect to Auth0 and then to the address you specified in the returnTo parameter. Check that you are no longer logged in to your application.

+

Now that users can log in, you need to configure a way to log out. Users must redirect to the Auth0 logout endpoint in the browser to clear their browser session. Again, Capacitor's Browser plugin should perform this redirect so that the user does not leave your app and receive a suboptimal experience.

To achieve this with Ionic and Capacitor in conjunction with the Auth0 SDK:

  • Construct the URL for your app Auth0 should use to redirect to after logout. This is a URL that uses your registered custom scheme and Auth0 domain. Add it to your Allowed Logout URLs configuration in the Auth0 Dashboard

  • Logout from the SDK by calling logout, and pass your redirect URL back as the logoutParams.returnTo parameter.

  • Set the openUrl parameter to a callback that uses the Capacitor browser plugin to open the URL using Browser.open.

Similar to the login step, if you do not set openUrl when calling logout, the SDK redirects the user to the logout URL using the default browser application on the device, which provides a suboptimal user experience.

Ionic & Capacitor (React) - Step 7 - Add logout to your application

Provide a way for your users to log out of your application. Verify that you redirect to Auth0 and then to the address you specified in the returnTo parameter. Check that you are no longer logged in to your application.

diff --git a/articles/quickstart/native/ionic-vue/interactive.md b/articles/quickstart/native/ionic-vue/interactive.md index 81994f425e..89121aa1ff 100644 --- a/articles/quickstart/native/ionic-vue/interactive.md +++ b/articles/quickstart/native/ionic-vue/interactive.md @@ -9,64 +9,45 @@ files: - files/App - files/UserProfile github: - path: https://github.com/auth0-samples/auth0-ionic-samples/tree/main/vue + path: vue locale: en-US --- # Add login to your Ionic Vue with Capacitor app -

Auth0 allows you to quickly add authentication and gain access to user profile information in your application. This guide demonstrates how to integrate Auth0 with an Ionic (Vue) & Capacitor application using the Auth0 Vue SDK.

+

Auth0 allows you to quickly add authentication and gain access to user profile information in your application. This guide demonstrates how to integrate Auth0 with an Ionic (Vue) & Capacitor application using the Auth0 Vue SDK.

## Getting started -

This quickstart assumes you already have an Ionic application up and running with Capacitor. If not, check out the Using Capacitor with Ionic Framework guide to get started with a simple app, or clone our sample apps.

You should also be familiar with the Capacitor development workflow.

+

This quickstart assumes you already have an Ionic application up and running with Capacitor. If not, check out the Using Capacitor with Ionic Framework guide to get started with a simple app, or clone our sample apps.

You should also be familiar with the Capacitor development workflow.

## Configure Auth0 -

To use Auth0 services, you need to have an application set up in the Auth0 Dashboard. The Auth0 application is where you will configure how you want authentication to work for your project.

Throughout this article, YOUR_PACKAGE_ID is your application's package ID. This can be found and configured in the appId field in your capacitor.config.ts file. See Capacitor's Config schema for more info.

Configure an application

Use the interactive selector to create a new Auth0 application or select an existing application that represents the project you want to integrate with. Every application in Auth0 is assigned an alphanumeric, unique client ID that your application code will use to call Auth0 APIs through the SDK.

Any settings you configure using this quickstart will automatically update for your application in the Dashboard, which is where you can manage your applications in the future.

If you would rather explore a complete configuration, you can view a sample application instead.

Configure Callback URLs

A callback URL is a URL in your application that you would like Auth0 to redirect users to after they have authenticated. If not set, users will not be returned to your application after they log in

If you are following along with our sample project, set this to YOUR_PACKAGE_ID://{yourDomain}/capacitor/YOUR_PACKAGE_ID/callback

Configure Logout URLs

A logout URL is a URL in your application that you would like Auth0 to redirect users to after they have logged out. If not set, users will not be able to log out from your application and will receive an error.

If you are following along with our sample project, set this to YOUR_PACKAGE_ID://{yourDomain}/capacitor/YOUR_PACKAGE_ID/callback.

Configure Allowed Origins

To be able to make requests from your native application to Auth0, set the following Allowed Origins in your Application Settings.

If you are following along with our sample project, set this to capacitor://localhost, http://localhost for iOS and Android respectively.

Lastly, be sure that the Application Type for your application is set to Native in the Application Settings.

+

To use Auth0 services, you need to have an application set up in the Auth0 Dashboard. The Auth0 application is where you will configure how you want authentication to work for your project.

Throughout this article, YOUR_PACKAGE_ID is your application's package ID. This can be found and configured in the appId field in your capacitor.config.ts file. See Capacitor's Config schema for more info.

Configure an application

Use the interactive selector to create a new Auth0 application or select an existing application that represents the project you want to integrate with. Every application in Auth0 is assigned an alphanumeric, unique client ID that your application code will use to call Auth0 APIs through the SDK.

Any settings you configure using this quickstart will automatically update for your application in the Dashboard, which is where you can manage your applications in the future.

If you would rather explore a complete configuration, you can view a sample application instead.

Configure Callback URLs

A callback URL is a URL in your application that you would like Auth0 to redirect users to after they have authenticated. If not set, users will not be returned to your application after they log in

If you are following along with our sample project, set this to YOUR_PACKAGE_ID://{yourDomain}/capacitor/YOUR_PACKAGE_ID/callback

Configure Logout URLs

A logout URL is a URL in your application that you would like Auth0 to redirect users to after they have logged out. If not set, users will not be able to log out from your application and will receive an error.

If you are following along with our sample project, set this to YOUR_PACKAGE_ID://{yourDomain}/capacitor/YOUR_PACKAGE_ID/callback.

Configure Allowed Origins

To be able to make requests from your native application to Auth0, set the following Allowed Origins in your Application Settings.

If you are following along with our sample project, set this to capacitor://localhost, http://localhost for iOS and Android respectively.

Lastly, be sure that the Application Type for your application is set to Native in the Application Settings.

## Install the Auth0 Vue SDK -

Run the following command within your project directory to install the Auth0 Vue SDK:

npm install @auth0/auth0-vue

The SDK exposes several types that help you integrate Auth0 with your Vue application idiomatically, including a module and an authentication service.

Install Capacitor plugins

This quickstart and sample make use of some of Capacitor's official plugins. Install these into your app using the following command:

npm install @capacitor/browser @capacitor/app

  • @capacitor/browser - allows you to interact with the device's system browser and is used to open the URL to Auth0's authorizaction endpoint

  • @capacitor/app - allows you to subscribe to high-level app events, useful for handling callbacks from Auth0

Capacitor's Browser plugin on iOS uses SFSafariViewController, which on iOS 11+ does not share cookies with Safari on the device. This means that SSO will not work on those devices. If you need SSO, please instead use a compatible plugin that uses ASWebAuthenticationSession.

+

Run the following command within your project directory to install the Auth0 Vue SDK:

npm install @auth0/auth0-vue

The SDK exposes several types that help you integrate Auth0 with your Vue application idiomatically, including a module and an authentication service.

Install Capacitor plugins

This quickstart and sample make use of some of Capacitor's official plugins. Install these into your app using the following command:

npm install @capacitor/browser @capacitor/app

  • @capacitor/browser - allows you to interact with the device's system browser and is used to open the URL to Auth0's authorizaction endpoint

  • @capacitor/app - allows you to subscribe to high-level app events, useful for handling callbacks from Auth0

Capacitor's Browser plugin on iOS uses SFSafariViewController, which on iOS 11+ does not share cookies with Safari on the device. This means that SSO will not work on those devices. If you need SSO, please instead use a compatible plugin that uses ASWebAuthenticationSession.

## Configure the CreateAuht0 plugin {{{ data-action="code" data-code="main.ts" }}} -The SDK exports `createAuth0`, a composable that contains all the services required for the SDK to function. This composable should be registered with your application and be configured with your Auth0 domain and Client ID. -The `createAuth0` composable takes the following configuration: +

The SDK exports createAuth0, a composable that contains all the services required for the SDK to function. This composable should be registered with your application and be configured with your Auth0 domain and Client ID.

The createAuth0 composable takes the following configuration:

  • domain: The domain value present under the Settings of the application you created in the Auth0 Dashboard, or your custom domain if you are using Auth0's custom domains feature.

  • clientId: The Client ID value present under the Settings of the application you created in the Auth0 Dashboard.

  • useRefreshTokens: To use auth0-vue with Ionic on Android and iOS, it's required to enable refresh tokens.

  • useRefreshTokensFallback: To use auth0-vue with Ionic on Android and iOS, it's required to disable the iframe fallback.

  • authorizationParams.redirect_uri: The URL to redirect your users after they authenticate with Auth0.

To persist authentication after closing and reopening the application, you may want to set cacheLocation to localstorage when configuring the SDK, but please be aware of the risks of storing tokens in localstorage. Also, localstorage should be treated as transient in Capacitor app as the data might be recovered unexpectedly in certain circumstances. Please read the guidance on storage in the Capacitor docs.

Additionally, the SDK has the ability to use a custom cache implementation to store tokens, if you have a requirement to use a more secure and persistent storage mechanism.

Note that we recommend against using Capacitor's Storage plugin to store tokens, as this is backed by UserDefaults and SharedPreferences on iOS and Android respectively. Data stored using these APIs is not encrypted, not secure, and could also be synced to the cloud.

ionic Quickstart - Step 4 Checkpoint

Now that you have configured your app with the Auth0 Vue SDK, run your application to verify that the SDK is initializing without error, and that your application runs as it did before.

-- `domain`: The `domain` value present under the **Settings** of the application you created in the Auth0 Dashboard, or your custom domain if you are using Auth0's custom domains feature. -- `clientId`: The Client ID value present under the **Settings** of the application you created in the Auth0 Dashboard. -- `useRefreshTokens`: To use auth0-vue with Ionic on Android and iOS, it's required to enable refresh tokens. -- `useRefreshTokensFallback`: To use auth0-vue with Ionic on Android and iOS, it's required to disable the iframe fallback. -- `authorizationParams.redirect_uri`: The URL to redirect your users after they authenticate with Auth0. - -<%= include('../_includes/ionic/_note_storage') %> - -:::: checkpoint -:::checkpoint-default -Now that you have configured your app with the Auth0 Vue SDK, run your application to verify that the SDK is initializing without error, and that your application runs as it did before. -::: - -:::checkpoint-failure -Sorry about that. Here's a couple things to double check: +
-- ensure the correct application is selected -- did you save after entering your URLs? -- make sure the domain and Client ID imported correctly +

Sorry about that. Here's a couple things to double check:

  • ensure the correct application is selected

  • did you save after entering your URLs?

  • make sure the domain and Client ID imported correctly

Still having issues? Check out our documentation or visit our community page to get more help.

-Still having issues? Check out our documentation or visit our community page to get more help. -::: -:::: +

## Add login to your application {{{ data-action="code" data-code="LoginButton.vue" }}} -

In a Capacitor application, the Capacitor's Browser plugin performs a redirect to the Auth0 Universal Login Page. Set the openUrl parameter on the loginWithRedirect function to use Browser.open so that the URL is opened using the device's system browser component (SFSafariViewController on iOS, and Chrome Custom Tabs on Android).

By default, the SDK's loginWithRedirect method uses window.location.href to navigate to the login page in the default browser application on the user's device rather than the system browser component appropriate for the platform. The user would leave your application to authenticate and could make for a suboptimal user experience.

ionic step 5 checkpoint

The loginWithRedirect function tells the SDK to initiate the login flow, using the Browser.open function to open the login URL with the platform's system browser component by setting the openUrl parameter. This provides a way for your user to log in to your application. Users redirect to the login page at Auth0 and do not receive any errors.

+

In a Capacitor application, the Capacitor's Browser plugin performs a redirect to the Auth0 Universal Login Page. Set the openUrl parameter on the loginWithRedirect function to use Browser.open so that the URL is opened using the device's system browser component (SFSafariViewController on iOS, and Chrome Custom Tabs on Android).

By default, the SDK's loginWithRedirect method uses window.location.href to navigate to the login page in the default browser application on the user's device rather than the system browser component appropriate for the platform. The user would leave your application to authenticate and could make for a suboptimal user experience.

ionic step 5 checkpoint

The loginWithRedirect function tells the SDK to initiate the login flow, using the Browser.open function to open the login URL with the platform's system browser component by setting the openUrl parameter. This provides a way for your user to log in to your application. Users redirect to the login page at Auth0 and do not receive any errors.

@@ -77,18 +58,18 @@ Still having issues? Check out our Once users logs in with the Universal Login Page, they redirect back to your app via a URL with a custom URL scheme. The appUrlOpen event must be handled within your app. You can call the handleRedirectCallback method from the Auth0 SDK to initialize the authentication state.

You can only use this method on a redirect from Auth0. To verify success, check for the presence of the code and state parameters in the URL.

The Browser.close() method should close the browser when this event is raised.

ionic step 6 Checkpoint

Add the appUrlOpen to your application's App component setup and log in. The browser window should close once the user authenticates and logs in to your app.

+

Once users logs in with the Universal Login Page, they redirect back to your app via a URL with a custom URL scheme. The appUrlOpen event must be handled within your app. You can call the handleRedirectCallback method from the Auth0 SDK to initialize the authentication state.

You can only use this method on a redirect from Auth0. To verify success, check for the presence of the code and state parameters in the URL.

The Browser.close() method should close the browser when this event is raised.

This article assumes you will be using Custom URL Schemes to handle the callback within your application. To do this, register your YOUR_PACKAGE_ID as a URL scheme for your chosen platform. To learn more, read Defining a Custom URL Scheme for iOS, or Create Deep Links to App Content for Android.

ionic step 6 Checkpoint

Add the appUrlOpen to your application's App component setup and log in. The browser window should close once the user authenticates and logs in to your app.

-

Sorry about that. Here's a couple things to double check:

+

Sorry about that. Here's a couple things to double check:

## Add logout to your application {{{ data-action="code" data-code="LogoutButton.vue" }}} -

Now that users can log in, you need to configure a way to log out. Users must redirect to the Auth0 logout endpoint in the browser to clear their browser session. Again, Capacitor's Browser plugin should perform this redirect so that the user does not leave your app and receive a suboptimal experience.

To achieve this with Ionic and Capacitor in conjunction with the Auth0 SDK:

  • Construct the URL for your app Auth0 should use to redirect to after logout. This is a URL that uses your registered custom scheme and Auth0 domain. Add it to your Allowed Logout URLs configuration in the Auth0 Dashboard

  • Logout from the SDK by calling logout, and pass your redirect URL back as the logoutParams.returnTo parameter.

  • Set the openUrl parameter to a callback that uses the Capacitor browser plugin to open the URL using Browser.open.

Similar to the login step, if you do not set openUrl when calling logout, the SDK redirects the user to the logout URL using the default browser application on the device, which provides a suboptimal user experience.

ionic step 7 Checkpoint

Provide a way for your users to log out of your application. Verify that you redirect to Auth0 and then to the address you specified in the returnTo parameter. Check that you are no longer logged in to your application.

+

Now that users can log in, you need to configure a way to log out. Users must redirect to the Auth0 logout endpoint in the browser to clear their browser session. Again, Capacitor's Browser plugin should perform this redirect so that the user does not leave your app and receive a suboptimal experience.

To achieve this with Ionic and Capacitor in conjunction with the Auth0 SDK:

  • Construct the URL for your app Auth0 should use to redirect to after logout. This is a URL that uses your registered custom scheme and Auth0 domain. Add it to your Allowed Logout URLs configuration in the Auth0 Dashboard

  • Logout from the SDK by calling logout, and pass your redirect URL back as the logoutParams.returnTo parameter.

  • Set the openUrl parameter to a callback that uses the Capacitor browser plugin to open the URL using Browser.open.

Similar to the login step, if you do not set openUrl when calling logout, the SDK redirects the user to the logout URL using the default browser application on the device, which provides a suboptimal user experience.

ionic step 7 Checkpoint

Provide a way for your users to log out of your application. Verify that you redirect to Auth0 and then to the address you specified in the returnTo parameter. Check that you are no longer logged in to your application.

@@ -99,7 +80,7 @@ Still having issues? Check out our The Auth0 Vue SDK retrieves the user's profile associated with logged-in users in whatever component you need, such as their name or profile picture, to personalize the user interface. The profile information is available through the user property exposed by the useAuth0() composable.

Initializing the SDK is asynchronous, and you should guard the user profile by checking the isLoading and user properties. Once isLoading is false and user has a value, the user profile can be used.

ionic step 8 Checkpoint

Provide a way for your users to see their user profile details within the app and verify you are able to retrieve and see your profile information on screen once you have logged in.

+

The Auth0 Vue SDK retrieves the user's profile associated with logged-in users in whatever component you need, such as their name or profile picture, to personalize the user interface. The profile information is available through the user property exposed by the useAuth0() composable.

Initializing the SDK is asynchronous, and you should guard the user profile by checking the isLoading and user properties. Once isLoading is false and user has a value, the user profile can be used.

ionic step 8 Checkpoint

Provide a way for your users to see their user profile details within the app and verify you are able to retrieve and see your profile information on screen once you have logged in.

diff --git a/articles/quickstart/native/ios-swift/01-login.md b/articles/quickstart/native/ios-swift/01-login.md index ac03db32a7..0998ae00ea 100755 --- a/articles/quickstart/native/ios-swift/01-login.md +++ b/articles/quickstart/native/ios-swift/01-login.md @@ -30,8 +30,6 @@ If the callback and logout URLs are not set, users will be unable to log in and ::: note On iOS 17.4+ and macOS 14.4+ it is possible to use Universal Links as callback and logout URLs. When enabled, Auth0.swift will fall back to using a custom URL scheme on older iOS / macOS versions. -Whenever possible, Auth0 recommends using Universal Links as a secure way to link directly to content within your app. Custom URL schemes can be subject to [client impersonation attacks](https://datatracker.ietf.org/doc/html/rfc8252#section-8.6). - **This feature requires Xcode 15.3+ and a paid Apple Developer account**. ::: diff --git a/articles/quickstart/native/ios-swift/interactive.md b/articles/quickstart/native/ios-swift/interactive.md index 03e38eef14..c455ebbbaa 100644 --- a/articles/quickstart/native/ios-swift/interactive.md +++ b/articles/quickstart/native/ios-swift/interactive.md @@ -8,92 +8,41 @@ files: - files/ProfileView - files/User github: - path: https://github.com/auth0-samples/auth0-ios-swift-sample/tree/master/Sample-01 + path: Sample-01 locale: en-US --- # Add Login to Your iOS or macOS Application -

This guide demonstrates how to add authentication and access user profile information in any iOS / macOS app using the Auth0.swift SDK.

To use this quickstart, you need to:

  • Sign up for a free Auth0 account or log in to Auth0.

  • Have an existing iOS / macOS app that you want to integrate. Alternatively, you can view or download a sample app after logging in.

+

This guide demonstrates how to add authentication and access user profile information in any iOS / macOS app using the Auth0.swift SDK.

To use this quickstart, you need to:

  • Sign up for a free Auth0 account or log in to Auth0.

  • Have an existing iOS / macOS app that you want to integrate. Alternatively, you can view or download a sample app after logging in.

## Configure Auth0 -

To use Auth0 services, you need an application set up in the Auth0 Dashboard. The Auth0 application is where you will configure how you want authentication to work for the app you are developing.

Configure an Auth0 application

Use the interactive selector to create a new Auth0 application or select an existing Native Auth0 application. Auth0 assigns every application an alphanumeric, unique Client ID that your app uses to call Auth0 APIs through the SDK.

Any settings you configure using this quickstart automatically update your Auth0 application in the Dashboard, which is where you can manage your applications in the future.

If you would rather explore a complete configuration, you can view a sample app instead.

Configure callback and logout URLs

Auth0 invokes the callback and logout URLs to redirect users back to your app. Auth0 invokes the callback URL after authenticating the user and the logout URL after removing the session cookie. If you do not set the callback and login URLs, users will not be able to log in and out of the app, and your app will produce an error.

On iOS 17.4+ and macOS 14.4+ it is possible to use Universal Links as callback and logout URLs. When enabled, Auth0.swift will fall back to using a custom URL scheme on older iOS / macOS versions.

This feature requires Xcode 15.3+ and a paid Apple Developer account.

Add the following URLs to Callback URLs and Logout URLs, depending on the platform of your app. If you have a custom domain, use this instead of your Auth0 tenant’s domain.

+

To use Auth0 services, you need an application set up in the Auth0 Dashboard. The Auth0 application is where you will configure how you want authentication to work for the app you are developing.

Configure an Auth0 application

Use the interactive selector to create a new Auth0 application or select an existing Native Auth0 application. Auth0 assigns every application an alphanumeric, unique Client ID that your app uses to call Auth0 APIs through the SDK.

Any settings you configure using this quickstart automatically update your Auth0 application in the Dashboard, which is where you can manage your applications in the future.

If you would rather explore a complete configuration, you can view a sample app instead.

Configure callback and logout URLs

Auth0 invokes the callback and logout URLs to redirect users back to your app. Auth0 invokes the callback URL after authenticating the user and the logout URL after removing the session cookie. If you do not set the callback and login URLs, users will not be able to log in and out of the app, and your app will produce an error.

On iOS 17.4+ and macOS 14.4+ it is possible to use Universal Links as callback and logout URLs. When enabled, Auth0.swift will fall back to using a custom URL scheme on older iOS / macOS versions.

This feature requires Xcode 15.3+ and a paid Apple Developer account.

Add the following URLs to Callback URLs and Logout URLs, depending on the platform of your app. If you have a custom domain, use this instead of your Auth0 tenant’s domain.

iOS

https://${account.namespace}/ios/YOUR_BUNDLE_IDENTIFIER/callback,
 
-Use the interactive selector to create a new Auth0 application or select an existing **Native** Auth0 application. Auth0 assigns every application an alphanumeric, unique Client ID that your app uses to call Auth0 APIs through the SDK.
-
-Any settings you configure using this quickstart automatically update your Auth0 application in the Dashboard, which is where you can manage your applications in the future.
-
-If you would rather explore a complete configuration, you can view a sample app instead.
-
-### Configure callback and logout URLs
-
-Auth0 invokes the callback and logout URLs to redirect users back to your app. Auth0 invokes the callback URL after authenticating the user and the logout URL after removing the session cookie. If you do not set the callback and login URLs, users will not be able to log in and out of the app, and your app will produce an error.
-
-::: note
-On iOS 17.4+ and macOS 14.4+ it is possible to use Universal Links as callback and logout URLs. When enabled, Auth0.swift will fall back to using a custom URL scheme on older iOS / macOS versions.
-
-Whenever possible, Auth0 recommends using Universal Links as a secure way to link directly to content within your app. Custom URL schemes can be subject to [client impersonation attacks](https://datatracker.ietf.org/doc/html/rfc8252#section-8.6).
-
-**This feature requires Xcode 15.3+ and a paid Apple Developer account**.
-:::
-
-Add the following URLs to **Callback URLs** and **Logout URLs**, depending on the platform of your app. If you have a custom domain, use this instead of your Auth0 tenant’s domain.
-
-#### iOS
-
-```text
-https://${account.namespace}/ios/YOUR_BUNDLE_IDENTIFIER/callback,
 YOUR_BUNDLE_IDENTIFIER://${account.namespace}/ios/YOUR_BUNDLE_IDENTIFIER/callback
-```
-
-#### macOS
-
-```text
-https://${account.namespace}/macos/YOUR_BUNDLE_IDENTIFIER/callback,
-YOUR_BUNDLE_IDENTIFIER://${account.namespace}/macos/YOUR_BUNDLE_IDENTIFIER/callback
-```
-
-For example, if your iOS bundle identifier was `com.example.MyApp` and your Auth0 domain was `example.us.auth0.com`, then this value would be:
-
-```text
-https://example.us.auth0.com/ios/com.example.MyApp/callback,
-com.example.MyApp://example.us.auth0.com/ios/com.example.MyApp/callback
-```
-
-### Configure the associated domain
-
-::: warning
-This step requires a paid Apple Developer account. It is needed to use Universal Links as callback and logout URLs. Skip this step to use a custom URL scheme instead.
-:::
-
-#### Configure the Team ID and bundle identifier
 
-Go to the settings page of your Auth0 application, scroll to the end, and open **Advanced Settings > Device Settings**. In the **iOS** section, set **Team ID** to your Apple Team ID, and **App ID** to your app's bundle identifier.
+
-

Screenshot of the iOS section inside the Auth0 application settings page

+

macOS

https://${account.namespace}/macos/YOUR_BUNDLE_IDENTIFIER/callback,
 
-This will add your app to your Auth0 tenant's `apple-app-site-association` file.
+YOUR_BUNDLE_IDENTIFIER://${account.namespace}/macos/YOUR_BUNDLE_IDENTIFIER/callback
 
-#### Add the associated domain capability
+
-In Xcode, go to the **Signing and Capabilities** tab of your app's target settings, and press the **+ Capability** button. Then select **Associated Domains**. +

For example, if your iOS bundle identifier was com.example.MyApp and your Auth0 domain was example.us.auth0.com, then this value would be:

https://example.us.auth0.com/ios/com.example.MyApp/callback,
 
-

Screenshot of the capabilities library inside Xcode

+com.example.MyApp://example.us.auth0.com/ios/com.example.MyApp/callback -Next, add the following entry under **Associated Domains**: +
-```text -webcredentials:${account.namespace} -``` +

Configure the associated domain

This step requires a paid Apple Developer account. It is needed to use Universal Links as callback and logout URLs. Skip this step to use a custom URL scheme instead.

Configure the Team ID and bundle identifier

Go to the settings page of your Auth0 application, scroll to the end, and open Advanced Settings > Device Settings. In the iOS section, set Team ID to your Apple Team ID and App ID to your app's bundle identifier.

Auth0 Dashboard> Applications > Applications > [Native App] > Settings tab > Advanced Settings > Device Settings tab

This will add your app to your Auth0 tenant's apple-app-site-association file.

Add the associated domain capability

In Xcode, go to the Signing and Capabilities tab of your app's target settings, and press the + Capability button. Then select Associated Domains.

Xcode> Signing and Capabilities tab > Add New > Associated Domains

Next, add the following entry under Associated Domains:

webcredentials:labs-fundtraining.us.auth0.com
 
-If you have a custom domain, use this instead of your Auth0 tenant’s domain.
+
-::: note -For the associated domain to work, your app must be signed with your team certificate **even when building for the iOS simulator**. Make sure you are using the Apple Team whose Team ID is configured in the settings page of your Auth0 application. -::: +

If you have a custom domain, use this instead of your Auth0 tenant’s domain.

For the associated domain to work, your app must be signed with your team certificate even when building for the iOS simulator. Make sure you are using the Apple Team whose Team ID is configured in the settings page of your Auth0 application.

## Install the SDK @@ -102,94 +51,56 @@ For the associated domain to work, your app must be signed with your team certif -

Then, select the dependency rule and press Add Package.

For further reference on SPM, check its official documentation.

Using Cocoapods

Add the following line to your Podfile:

pod 'Auth0', '~> 2.0'
+

Then, select the dependency rule and press Add Package.

For further reference on SPM, check its official documentation.

Using Cocoapods

Add the following line to your Podfile:

pod 'Auth0', '~> 2.0'
 
 
-

Then, run pod install.

For further reference on Cocoapods, check their official documentation.

Using Carthage

Add the following line to your Cartfile:

github "auth0/Auth0.swift" ~> 2.0
+

Then, run pod install.

For further reference on Cocoapods, check their official documentation.

Using Carthage

Add the following line to your Cartfile:

github "auth0/Auth0.swift" ~> 2.0
 
 
-

Then, run carthage bootstrap --use-xcframeworks.

For further reference on Carthage, check their official documentation.

+

Then, run carthage bootstrap --use-xcframeworks.

For further reference on Carthage, check their official documentation.

## Configure the SDK {{{ data-action="code" data-code="Auth0.plist" }}} -

The Auth0.swift SDK needs your Auth0 domain and Client ID. You can find these values in the settings page of your Auth0 application.

  • domain: The domain of your Auth0 tenant. If you have a custom domain, use this instead of your Auth0 tenant’s domain.

  • Client ID: The alphanumeric, unique ID of the Auth0 application you set up earlier in this quickstart.

Create a plist file named Auth0.plist in your app bundle containing the Auth0 domain and Client ID values.

You can also configure the SDK programmatically. Check the README to learn more.

iOS Swift Quickstart - Step 3 Checkpoint

You configured the Auth0.swift SDK. Run your app to verify that it is not producing any errors related to the SDK.

+

The Auth0.swift SDK needs your Auth0 domain and Client ID. You can find these values in the settings page of your Auth0 application.

  • domain: The domain of your Auth0 tenant. If you have a custom domain, use this instead of your Auth0 tenant’s domain.

  • Client ID: The alphanumeric, unique ID of the Auth0 application you set up earlier in this quickstart.

Create a plist file named Auth0.plist in your app bundle containing the Auth0 domain and Client ID values.

You can also configure the SDK programmatically. Check the README to learn more.

iOS Swift Quickstart - Step 3 Checkpoint

You configured the Auth0.swift SDK. Run your app to verify that it is not producing any errors related to the SDK.

-### Using Carthage - -Add the following line to your `Cartfile`: - -```text -github "auth0/Auth0.swift" ~> 2.0 -``` - -Then, run `carthage bootstrap --use-xcframeworks`. +

If your app produces errors related to the SDK:

  • Make sure you selected the correct Auth0 application

  • Verify you saved your URL updates

  • Ensure you set the Auth0 domain and Client ID correctly

Still having issues? Check out our documentation or visit our community page to get more help.

-::: note -For further reference on Carthage, check their official documentation. -::: - -## Configure the SDK {{{ data-action=code data-code="Auth0.plist" }}} - -The Auth0.swift SDK needs your Auth0 **domain** and **Client ID**. You can find these values in the settings page of your Auth0 application. - -- **domain**: The domain of your Auth0 tenant. If you have a custom domain, use this instead of your Auth0 tenant’s domain. -- **Client ID**: The alphanumeric, unique ID of the Auth0 application you set up earlier in this quickstart. - -Create a `plist` file named `Auth0.plist` in your app bundle containing the Auth0 domain and Client ID values. - -::: note -You can also configure the SDK programmatically. Check the README to learn more. -::: - -::::checkpoint -:::checkpoint-default -You configured the Auth0.swift SDK. Run your app to verify that it is not producing any errors related to the SDK. -::: - -:::checkpoint-failure -If your app produces errors related to the SDK: -- Make sure you selected the correct Auth0 application -- Verify you saved your URL updates -- Ensure you set the Auth0 domain and Client ID correctly - -Still having issues? Check out our documentation or visit our community page to get more help. -::: -:::: +

## Add login to your application {{{ data-action="code" data-code="MainView.swift#20:31" }}} -

Import the Auth0 module in the file where you want to present the login page. Then, present the Universal Login page in the action of your Login button.

You can use async/await or Combine instead of the callback-based API. Check the README to learn more.

An example Universal Login screen for an iOS app

iOS Swift Quickstart - Step 4 Checkpoint

Press the Login button and verify that:

  • An alert box shows up asking for consent.

  • Choosing Continue opens the Universal Login page in a Safari modal.

  • You can log in or sign up using a username and password or a social provider.

  • The Safari modal closes automatically afterward.

+

Import the Auth0 module in the file where you want to present the login page. Then, present the Universal Login page in the action of your Login button.

You can use async/await or Combine instead of the callback-based API. Check the README to learn more.

An example Universal Login screen for an iOS app

iOS Swift Quickstart - Step 4 Checkpoint

Press the Login button and verify that:

  • An alert box shows up asking for consent.

  • Choosing Continue opens the Universal Login page in a Safari modal.

  • You can log in or sign up using a username and password or a social provider.

  • The Safari modal closes automatically afterward.

-

If login fails or produces errors:

  • Verify you entered the correct callback URL

  • Ensure you set the Auth0 domain and Client ID correctly

Still having issues? Check out our documentation or visit our community page to get more help.

+

If login fails or produces errors:

  • Verify you entered the correct callback URL

  • Ensure you set the Auth0 domain and Client ID correctly

Still having issues? Check out our documentation or visit our community page to get more help.

## Add logout to your application {{{ data-action="code" data-code="MainView.swift#34:45" }}} -

Now that you can log in to your app, you need a way to log out. In the action of your Logout button, call the clearSession() method to clear the Universal Login session cookie.

iOS Swift Quickstart - Step 5 Checkpoint

Press the Logout button and verify that:

  • An alert box shows up asking for consent.

  • Choosing Continue opens a page in a Safari modal.

  • The Safari modal closes automatically soon after.

+

Now that you can log in to your app, you need a way to log out. In the action of your Logout button, call the clearSession() method to clear the Universal Login session cookie.

iOS Swift Quickstart - Step 5 Checkpoint

Press the Logout button and verify that:

  • An alert box shows up asking for consent.

  • Choosing Continue opens a page in a Safari modal.

  • The Safari modal closes automatically soon after.

-

If logout fails or produces errors:

  • Verify you entered the correct callback URL

  • Ensure you set the Auth0 domain and Client ID correctly

Still having issues? Check out our documentation or visit our community page to get more help.

+

If logout fails or produces errors:

  • Verify you entered the correct callback URL

  • Ensure you set the Auth0 domain and Client ID correctly

Still having issues? Check out our documentation or visit our community page to get more help.

## Access user profile information {{{ data-action="code" data-code="User.swift#11:14" }}} -

The Credentials instance you obtained after logging in includes an ID token. The ID token contains the profile information associated with the logged-in user, such as their email and profile picture. You can use these details to personalize the user interface of your app.

The Auth0.swift SDK includes a utility for decoding JWTs like the ID token. Start by importing the JWTDecode module in the file where you want to access the user profile information. Then, use the decode(jwt:) method to decode the ID token and access the claims it contains.

You can retrieve the latest user information with the userInfo(withAccessToken:) method. Check the EXAMPLES to learn more.

iOS Swift Quickstart - Step 6 Checkpoint

Verify that you can access the email, picture, or any other claim after you have logged in.

+

The Credentials instance you obtained after logging in includes an ID token. The ID token contains the profile information associated with the logged-in user, such as their email and profile picture. You can use these details to personalize the user interface of your app.

The Auth0.swift SDK includes a utility for decoding JWTs like the ID token. Start by importing the JWTDecode module in the file where you want to access the user profile information. Then, use the decode(jwt:) method to decode the ID token and access the claims it contains.

You can retrieve the latest user information with the userInfo(withAccessToken:) method. Check the EXAMPLES to learn more.

iOS Swift Quickstart - Step 6 Checkpoint

Verify that you can access the email, picture, or any other claim after you have logged in.

-

If you cannot access the user information:

  • Verify you imported the JWTDecode module where you invoke the decode(jwt:) method

  • Make sure you spelled your claims correctly

Still having issues? Check out our documentation or visit our community forums to get more help.

+

If you cannot access the user information:

  • Verify you imported the JWTDecode module where you invoke the decode(jwt:) method

  • Make sure you spelled your claims correctly

Still having issues? Check out our documentation or visit our community forums to get more help.

diff --git a/articles/quickstart/native/maui/interactive.md b/articles/quickstart/native/maui/interactive.md index 7e7e0aa404..2cd149cf4d 100644 --- a/articles/quickstart/native/maui/interactive.md +++ b/articles/quickstart/native/maui/interactive.md @@ -5,24 +5,24 @@ interactive: true files: - files/MainPage.xaml github: - path: https://github.com/auth0-samples/auth0-maui-samples/tree/master/Sample + path: Sample locale: en-US --- # Add Login to Your MAUI Application -

Auth0 allows you to add authentication to almost any application type quickly. This guide demonstrates how to integrate Auth0, add authentication, and display user profile information in any .NET MAUI application using the Auth0 SDKs for MAUI.

The MAUI SDK supports Android, iOS, macOS, and Windows. Continue reading for platform-specific configuration.

+

Auth0 allows you to add authentication to almost any application type quickly. This guide demonstrates how to integrate Auth0, add authentication, and display user profile information in any .NET MAUI application using the Auth0 SDKs for MAUI.

The MAUI SDK supports Android, iOS, macOS, and Windows. Continue reading for platform-specific configuration.

## Configure Auth0 -

To use Auth0 services, you’ll need to have an application set up in the Auth0 Dashboard. The Auth0 application is where you will configure how you want authentication to work for the project you are developing.

Configure an application

Use the interactive selector to create a new Auth0 application or select an existing application that represents the project you want to integrate with. Every application in Auth0 is assigned an alphanumeric, unique client ID that your application code will use to call Auth0 APIs through the SDK.

Any settings you configure using this quickstart will automatically update for your Application in the Dashboard, which is where you can manage your Applications in the future.

If you would rather explore a complete configuration, you can view a sample application instead.

Configure Callback URLs

A callback URL is a URL in your application that you would like Auth0 to redirect users to after they have authenticated. If not set, users will not be returned to your application after they log in.

If you are following along with our sample project, set this to myapp://callback.

Configure Logout URLs

A logout URL is a URL in your application that you would like Auth0 to redirect users to after they have logged out. If not set, users will not be able to log out from your application and will receive an error.

If you are following along with our sample project, set this to myapp://callback.

+

To use Auth0 services, you’ll need to have an application set up in the Auth0 Dashboard. The Auth0 application is where you will configure how you want authentication to work for the project you are developing.

Configure an application

Use the interactive selector to create a new Auth0 application or select an existing application that represents the project you want to integrate with. Every application in Auth0 is assigned an alphanumeric, unique client ID that your application code will use to call Auth0 APIs through the SDK.

Any settings you configure using this quickstart will automatically update for your Application in the Dashboard, which is where you can manage your Applications in the future.

If you would rather explore a complete configuration, you can view a sample application instead.

Configure Callback URLs

A callback URL is a URL in your application that you would like Auth0 to redirect users to after they have authenticated. If not set, users will not be returned to your application after they log in.

If you are following along with our sample project, set this to myapp://callback.

Configure Logout URLs

A logout URL is a URL in your application that you would like Auth0 to redirect users to after they have logged out. If not set, users will not be able to log out from your application and will receive an error.

If you are following along with our sample project, set this to myapp://callback.

## Install the Auth0 SDK -

Auth0 provides a MAUI SDK to simplify the process of implementing Auth0 authentication in MAUI applications.

Use the NuGet Package Manager (Tools -> Library Package Manager -> Package Manager Console) to install the Auth0.OidcClient.MAUI package.

Alternatively, you can use the NuGet Package Manager Console (Install-Package) or the dotnet CLI (dotnet add).

Install-Package Auth0.OidcClient.MAUI
+

Auth0 provides a MAUI SDK to simplify the process of implementing Auth0 authentication in MAUI applications.

Use the NuGet Package Manager (Tools -> Library Package Manager -> Package Manager Console) to install the Auth0.OidcClient.MAUI package.

Alternatively, you can use the NuGet Package Manager Console (Install-Package) or the dotnet CLI (dotnet add).

Install-Package Auth0.OidcClient.MAUI
 
 
@@ -39,15 +39,15 @@ locale: en-US [IntentFilter(new[] { Intent.ActionView }, - Categories = new[] { Intent.CategoryDefault, Intent.CategoryBrowsable }, + Categories = new[] { Intent.CategoryDefault, Intent.CategoryBrowsable }, - DataScheme = CALLBACK_SCHEME)] + DataScheme = CALLBACK_SCHEME)] public class WebAuthenticatorActivity : Microsoft.Maui.Authentication.WebAuthenticatorCallbackActivity { - const string CALLBACK_SCHEME = "myapp"; + const string CALLBACK_SCHEME = "myapp"; } @@ -55,19 +55,19 @@ public class WebAuthenticatorActivity : Microsoft.Maui.Authentication.WebAuthent

The above activity will ensure the application can handle the myapp://callback URL when Auth0 redirects back to the Android application after logging in.

Windows

To make sure it can properly reactivate your application after being redirected back to Auth0, you need to do two things:

  • Add the corresponding protocol to the Package.appxmanifest. In this case, this is set to myapp, but you can change this to whatever you like (ensure to update all relevant Auth0 URLs as well).

<Applications>
 
-  <Application Id="App" Executable="$targetnametoken$.exe" EntryPoint="$targetentrypoint$">
+ <Application Id="App" Executable="$targetnametoken$.exe" EntryPoint="$targetentrypoint$">
 
-    <Extensions>
+ <Extensions>
 
-      <uap:Extension Category="windows.protocol">
+ <uap:Extension Category="windows.protocol">
 
-        <uap:Protocol Name="myapp"/>
+ <uap:Protocol Name="myapp"/>
 
-      </uap:Extension>
+ </uap:Extension>
 
-    </Extensions>
+ </Extensions>
 
-  </Application>
+ </Application>
 
 </Applications>
 
@@ -77,13 +77,13 @@ public class WebAuthenticatorActivity : Microsoft.Maui.Authentication.WebAuthent
 
 {
 
-  if (Auth0.OidcClient.Platforms.Windows.Activator.Default.CheckRedirectionActivation())
+ if (Auth0.OidcClient.Platforms.Windows.Activator.Default.CheckRedirectionActivation())
 
-    return;
+ return;
 
 
 
-  this.InitializeComponent();
+ this.InitializeComponent();
 
 }
 
@@ -98,21 +98,19 @@ public class WebAuthenticatorActivity : Microsoft.Maui.Authentication.WebAuthent
 
 
 
-var client = new Auth0Client(new Auth0ClientOptions
+ var client = new Auth0Client(new Auth0ClientOptions {
 
-{
-
-    Domain = "${account.namespace}",
+ Domain = "${account.namespace}",
 
-    ClientId = "${account.clientId}",
+ ClientId = "${account.clientId}",
 
-    RedirectUri = "myapp://callback",
+ RedirectUri = "myapp://callback",
 
-    PostLogoutRedirectUri = "myapp://callback",
+ PostLogoutRedirectUri = "myapp://callback",
 
-    Scope = "openid profile email"
+ Scope = "openid profile email"
 
-});
+ });
 
 
@@ -120,7 +118,7 @@ var client = new Auth0Client(new Auth0ClientOptions
-

Sorry about that. Here are a couple things to double-check:

  • make sure the correct application is selected

  • did you save after entering your URLs?

  • make sure the domain and client ID are imported correctly

Still having issues? Check out our documentation or visit our community page to get more help.

+

Sorry about that. Here are a couple things to double-check:

  • make sure the correct application is selected

  • did you save after entering your URLs?

  • make sure the domain and client ID are imported correctly

Still having issues? Check out our documentation or visit our community page to get more help.

@@ -135,7 +133,7 @@ var client = new Auth0Client(new Auth0ClientOptions
-

Sorry about that. Here's something to double-check:

  • you called LoginAsync as expected

Still having issues? Check out our documentation or visit our community page to get more help.

+

Sorry about that. Here's something to double-check:

  • you called LoginAsync as expected

Still having issues? Check out our documentation or visit our community page to get more help.

@@ -150,11 +148,11 @@ var client = new Auth0Client(new Auth0ClientOptions
-

Sorry about that. Here are a couple things to double-check:

  • you configured the correct Logout URL

  • you called LogoutAsync as expected.

Still having issues? Check out our documentation or visit our community page to get more help.

+

Sorry about that. Here are a couple things to double-check:

  • you configured the correct Logout URL

  • you called LogoutAsync as expected.

Still having issues? Check out our documentation or visit our community page to get more help.

## Show user profile information {{{ data-action="code" data-code="MainPage.xaml.cs#55:58" }}} -

Now that your users can log in and log out, you will likely want to be able to retrieve the profile information associated with authenticated users. For example, you may want to be able to display a logged-in user’s name or profile picture in your project.

The Auth0 SDK for MAUI provides user information through the LoginResult.User property.

+

Now that your users can log in and log out, you will likely want to be able to retrieve the profile information associated with authenticated users. For example, you may want to be able to display a logged-in user’s name or profile picture in your project.

The Auth0 SDK for MAUI provides user information through the LoginResult.User property.

diff --git a/articles/quickstart/native/net-android-ios/interactive.md b/articles/quickstart/native/net-android-ios/interactive.md index 7bd2c84c09..723d6a2e52 100644 --- a/articles/quickstart/native/net-android-ios/interactive.md +++ b/articles/quickstart/native/net-android-ios/interactive.md @@ -7,26 +7,26 @@ files: - files/AppDelegate - files/MyViewController github: - path: https://github.com/auth0-samples/auth0-xamarin-oidc-samples/tree/master/Quickstart/01-Login + path: Quickstart/01-Login locale: en-US --- # Add Login to Your .NET Android and iOS Application -

Auth0 allows you to add authentication to almost any application type quickly. This guide demonstrates how to integrate Auth0, add authentication, and display user profile information in any .NET Android and iOS application using the Auth0 SDKs for Android and iOS.

This quickstart focuses on .NET Android and iOS, as they are the next generation of Xamarin.Android and Xamarin.iOS. If you are still using Xamarin.Android and Xamarin.iOS, you can follow this guide as the integration is identical, and the SDKs are compatible. +

Auth0 allows you to add authentication to almost any application type quickly. This guide demonstrates how to integrate Auth0, add authentication, and display user profile information in any .NET Android and iOS application using the Auth0 SDKs for Android and iOS.

This quickstart focuses on .NET Android and iOS, as they are the next generation of Xamarin.Android and Xamarin.iOS. If you are still using Xamarin.Android and Xamarin.iOS, you can follow this guide as the integration is identical, and the SDKs are compatible.

To use this quickstart, you’ll need to:

  • Sign up for a free Auth0 account or log in to Auth0.

  • Have a working Android or iOS project using .NET 6 (or above) that you want to integrate with. Alternatively, you can view or download a sample application after logging in.

## Configure Auth0 -

To use Auth0 services, you need to have an application set up in the Auth0 Dashboard. The Auth0 application is where you will configure how you want authentication to work for your project.

Configure an application

Use the interactive selector to create a new "Native Application", or select an existing application that represents the project you want to integrate with. Every application in Auth0 is assigned an alphanumeric, unique client ID that your application code will use to call Auth0 APIs through the SDK.

Any settings you configure using this quickstart will automatically update for your application in the Dashboard, which is where you can manage your applications in the future.

If you would rather explore a complete configuration, you can view a sample application instead.

Configure Callback URLs

A callback URL is a URL in your application that you would like Auth0 to redirect users to after they have authenticated. If not set, users will not be returned to your application after they log in.

If you are following along with our sample project, set this to one of the following URLs depending on your platform:

  • Android: YOUR_PACKAGE_NAME://{yourDomain}/android/YOUR_PACKAGE_NAME/callback

  • iOS: YOUR_BUNDLE_ID://{yourDomain}/ios/YOUR_BUNDLE_ID/callback

Configure Logout URLs

A logout URL is a URL in your application that you would like Auth0 to redirect users to after they have logged out. If not set, users will not be able to log out from your application and will receive an error.

If you are following along with our sample project, set this to one of the following URLs depending on your platform:

  • Android: YOUR_PACKAGE_NAME://{yourDomain}/android/YOUR_PACKAGE_NAME/callback

  • iOS: YOUR_BUNDLE_ID://{yourDomain}/ios/YOUR_BUNDLE_ID/callback

Lastly, be sure that the Application Type for your application is set to Native in the Application Settings.

+

To use Auth0 services, you need to have an application set up in the Auth0 Dashboard. The Auth0 application is where you will configure how you want authentication to work for your project.

Configure an application

Use the interactive selector to create a new "Native Application", or select an existing application that represents the project you want to integrate with. Every application in Auth0 is assigned an alphanumeric, unique client ID that your application code will use to call Auth0 APIs through the SDK.

Any settings you configure using this quickstart will automatically update for your application in the Dashboard, which is where you can manage your applications in the future.

If you would rather explore a complete configuration, you can view a sample application instead.

Configure Callback URLs

A callback URL is a URL in your application that you would like Auth0 to redirect users to after they have authenticated. If not set, users will not be returned to your application after they log in.

If you are following along with our sample project, set this to one of the following URLs depending on your platform:

  • Android: YOUR_PACKAGE_NAME://{yourDomain}/android/YOUR_PACKAGE_NAME/callback

  • iOS: YOUR_BUNDLE_ID://{yourDomain}/ios/YOUR_BUNDLE_ID/callback

Configure Logout URLs

A logout URL is a URL in your application that you would like Auth0 to redirect users to after they have logged out. If not set, users will not be able to log out from your application and will receive an error.

If you are following along with our sample project, set this to one of the following URLs depending on your platform:

  • Android: YOUR_PACKAGE_NAME://{yourDomain}/android/YOUR_PACKAGE_NAME/callback

  • iOS: YOUR_BUNDLE_ID://{yourDomain}/ios/YOUR_BUNDLE_ID/callback

Lastly, be sure that the Application Type for your application is set to Native in the Application Settings.

## Install the Auth0 SDK -

Auth0 provides an Android and iOS SDK to simplify the process of implementing Auth0 authentication in .NET Android and iOS applications.

Use the NuGet Package Manager (Tools -> Library Package Manager -> Package Manager Console) to install the Auth0.OidcClient.AndroidX or Auth0.OidcClient.iOS package, depending on whether you are building an Android or iOS application.

Alternatively, you can use the NuGet Package Manager Console (Install-Package) or the dotnet CLI (dotnet add).

Install-Package Auth0.OidcClient.AndroidX
+

Auth0 provides an Android and iOS SDK to simplify the process of implementing Auth0 authentication in .NET Android and iOS applications.

Use the NuGet Package Manager (Tools -> Library Package Manager -> Package Manager Console) to install the Auth0.OidcClient.AndroidX or Auth0.OidcClient.iOS package, depending on whether you are building an Android or iOS application.

Alternatively, you can use the NuGet Package Manager Console (Install-Package) or the dotnet CLI (dotnet add).

Install-Package Auth0.OidcClient.AndroidX
 
 Install-Package Auth0.OidcClient.iOS
 
@@ -61,7 +61,7 @@ var client = new Auth0Client(new Auth0ClientOptions {
 
   
-

Sorry about that. Here are a couple things to double-check:

  • make sure the correct application is selected

  • did you save after entering your URLs?

  • make sure the domain and client ID are imported correctly

Still having issues? Check out our documentation or visit our community page to get more help.

+

Sorry about that. Here are a couple things to double-check:

  • make sure the correct application is selected

  • did you save after entering your URLs?

  • make sure the domain and client ID are imported correctly

Still having issues? Check out our documentation or visit our community page to get more help.

@@ -126,7 +126,7 @@ var client = new Auth0Client(new Auth0ClientOptions {
-

Sorry about that. Here's something to double-check:

  • you called LoginAsync as expected

Still having issues? Check out our documentation or visit our community page to get more help.

+

Sorry about that. Here's something to double-check:

  • you called LoginAsync as expected

Still having issues? Check out our documentation or visit our community page to get more help.

@@ -141,7 +141,7 @@ var client = new Auth0Client(new Auth0ClientOptions {
-

Sorry about that. Here are a couple things to double-check:

  • you configured the correct Logout URL

  • you called LogoutAsync as expected.

Still having issues? Check out our documentation or visit our community page to get more help.

+

Sorry about that. Here are a couple things to double-check:

  • you configured the correct Logout URL

  • you called LogoutAsync as expected.

Still having issues? Check out our documentation or visit our community page to get more help.

diff --git a/articles/quickstart/native/react-native-expo/interactive.md b/articles/quickstart/native/react-native-expo/interactive.md index 611e553be7..836f40b42b 100644 --- a/articles/quickstart/native/react-native-expo/interactive.md +++ b/articles/quickstart/native/react-native-expo/interactive.md @@ -6,7 +6,7 @@ files: - files/App - files/app github: - path: https://github.com/auth0-samples/auth0-react-native-sample/tree/master/00-Login + path: 00-Login locale: en-US --- @@ -18,22 +18,22 @@ locale: en-US ## Configure Auth0 -

To use Auth0 services, you need to have an application set up in the Auth0 Dashboard. The Auth0 application is where you will configure authentication in your project.

Configure an application

Use the interactive selector to create a new Auth0 application or select an existing application that represents the project you want to integrate with. Every application in Auth0 is assigned an alphanumeric, unique client ID that your application code will use to call Auth0 APIs through the SDK.

Any settings you configure using this quickstart will automatically update for your Application in the Dashboard, which is where you can manage your Applications in the future.

If you would rather explore a complete configuration, you can view a sample application instead.

Configure callback and logout URLs

Auth0 invokes the callback and logout URLs to redirect users back to your application. Auth0 invokes the callback URL after authenticating the user and the logout URL after removing the session cookie. If you do not set the callback and logout URLs, users will not be able to log in and out of the app, and your application will produce an error.

Add the corresponding URL to Callback URLs and Logout URLs, according to your app's platform. If you are using a custom domain, use the value of your custom domain instead of your Auth0 tenant’s domain.

iOS

BUNDLE_IDENTIFIER.auth0://${account.namespace}/ios/BUNDLE_IDENTIFIER/callback

Android

PACKAGE_NAME.auth0://${account.namespace}/android/PACKAGE_NAME/callback

If you are following along with our sample project, use the following value:

  • iOS: com.auth0samples.auth0://{yourDomain}/ios/com.auth0samples/callback

  • Android: com.auth0samples.auth0://{yourDomain}/android/com.auth0samples/callback

+

To use Auth0 services, you need to have an application set up in the Auth0 Dashboard. The Auth0 application is where you will configure authentication in your project.

Configure an application

Use the interactive selector to create a new Auth0 application or select an existing application that represents the project you want to integrate with. Every application in Auth0 is assigned an alphanumeric, unique client ID that your application code will use to call Auth0 APIs through the SDK.

Any settings you configure using this quickstart will automatically update for your Application in the Dashboard, which is where you can manage your Applications in the future.

If you would rather explore a complete configuration, you can view a sample application instead.

Configure callback and logout URLs

Auth0 invokes the callback and logout URLs to redirect users back to your application. Auth0 invokes the callback URL after authenticating the user and the logout URL after removing the session cookie. If you do not set the callback and logout URLs, users will not be able to log in and out of the app, and your application will produce an error.

Add the corresponding URL to Callback URLs and Logout URLs, according to your app's platform. If you are using a custom domain, use the value of your custom domain instead of your Auth0 tenant’s domain.

iOS

BUNDLE_IDENTIFIER.auth0://${account.namespace}/ios/BUNDLE_IDENTIFIER/callback

Android

PACKAGE_NAME.auth0://${account.namespace}/android/PACKAGE_NAME/callback

If you are following along with our sample project, use the following value:

  • iOS: com.auth0samples.auth0://{yourDomain}/ios/com.auth0samples/callback

  • Android: com.auth0samples.auth0://{yourDomain}/android/com.auth0samples/callback

## Install dependencies -

In this section, you will learn how to install the React Native Auth0 module.

Please refer to the official documentation for additional details on React Native.

Yarn

yarn add react-native-auth0

For further reference on yarn, check their official documentation.

npm

npm install react-native-auth0 --save

+

In this section, you will learn how to install the React Native Auth0 module.

Please refer to the official documentation for additional details on React Native.

Yarn

yarn add react-native-auth0

For further reference on yarn, check their official documentation.

npm

npm install react-native-auth0 --save

## Setup Auth0 Config Plugin {{{ data-action="code" data-code="app.json#10:15" }}} -

The Auth0 package runs custom native code that must be configured at build time. Use Expo Config Plugin to achieve this.

The react-native-auth0 plugin will be added in the Expo config.

+

The Auth0 package runs custom native code that must be configured at build time. Use Expo Config Plugin to achieve this.

The react-native-auth0 plugin will be added in the Expo config.

## Generate Native Source Code {{{ data-action="code" data-code="app.json#31:36" }}} -

You must generate the native code for the above configuration to be set. To do this, run the following command:

expo prebuild

You will be prompted to provide the Android package and iOS bundle identifier if they are not already present in the Expo config.

? What would you like your Android package name to be? > com.auth0samples # or your desired package name
+

You must generate the native code for the above configuration to be set. To do this, run the following command:

expo prebuild

You will be prompted to provide the Android package and iOS bundle identifier if they are not already present in the Expo config.

? What would you like your Android package name to be? > com.auth0samples # or your desired package name
 
 
 
@@ -54,7 +54,7 @@ locale: en-US
 
   
-

If your application did not launch successfully:

  • make sure the correct application is selected

  • did you save after entering your URLs?

  • ensure your domain and client ID values are correct

Still having issues? Check out our documentation or visit our community page to get more help.

+

If your application did not launch successfully:

  • make sure the correct application is selected

  • did you save after entering your URLs?

  • ensure your domain and client ID values are correct

Still having issues? Check out our documentation or visit our community page to get more help.

@@ -65,7 +65,7 @@ locale: en-US
-

If your application did not launch successfully:

  • ensure you set the Allowed Callback URLs are correct

  • verify you saved your changes after entering your URLs

  • make sure the domain and client ID values are imported correctly

  • if using Android, ensure that the manifest placeholders have been set up correctly, otherwise the redirect back to your app may not work

Still having issues? Check out our documentation or visit our community page to get more help.

+

If your application did not launch successfully:

  • ensure you set the Allowed Callback URLs are correct

  • verify you saved your changes after entering your URLs

  • make sure the domain and client ID values are imported correctly

  • if using Android, ensure that the manifest placeholders have been set up correctly, otherwise the redirect back to your app may not work

Still having issues? Check out our documentation or visit our community page to get more help.

@@ -76,14 +76,14 @@ locale: en-US
-

If your application did not log out successfully:

  • ensure the Allowed Logout URLs are set properly

  • verify you saved your changes after entering your URLs

Still having issues? Check out our documentation or visit our community page to get more help.

+

If your application did not log out successfully:

  • ensure the Allowed Logout URLs are set properly

  • verify you saved your changes after entering your URLs

Still having issues? Check out our documentation or visit our community page to get more help.

## Show user profile information {{{ data-action="code" data-code="App.js#32:34" }}} -

The useAuth0 hook exposes a user object that contains information about the authenticated user. You can use this to access user profile information about the authenticated user that has been decoded from the ID token.

If a user has not been authenticated, this property will be null.

Expo - Step 8 - Show user profile information

Log in and inspect the user property on the result. Verify the current user's profile information, such as email or name.

+

The useAuth0 hook exposes a user object that contains information about the authenticated user. You can use this to access user profile information about the authenticated user that has been decoded from the ID token.

If a user has not been authenticated, this property will be null.

Expo - Step 8 - Show user profile information

Log in and inspect the user property on the result. Verify the current user's profile information, such as email or name.

diff --git a/articles/quickstart/native/react-native/interactive.md b/articles/quickstart/native/react-native/interactive.md index d9afe4ba70..30f176e236 100644 --- a/articles/quickstart/native/react-native/interactive.md +++ b/articles/quickstart/native/react-native/interactive.md @@ -5,19 +5,19 @@ interactive: true files: - files/app github: - path: https://github.com/auth0-samples/auth0-react-native-sample/tree/master/00-Login + path: 00-Login locale: en-US --- # Add Login to Your React Native Application -

This Quickstart is for the React Native framework. To integrate Auth0 into your Expo application, refer to the Expo Quickstart.

+

This Quickstart is for the React Native framework. To integrate Auth0 into your Expo application, refer to the Expo Quickstart.

## Configure Auth0 -

To use Auth0 services, you must have an application set up in the Auth0 Dashboard. The Auth0 application is where you will configure authentication in your project.

Configure an application

Use the interactive selector to create a new Auth0 application or select an existing application that represents the project you want to integrate with. Every application in Auth0 is assigned an alphanumeric, unique client ID that your application code will use to call Auth0 APIs through the SDK.

Any settings you configure using this quickstart will automatically update for your Application in the Dashboard, which is where you can manage your Applications in the future.

To explore a complete configuration, review the sample application in your Dashboard.

Configure callback and logout URLs

Auth0 invokes the callback and logout URLs to redirect users back to your application. Auth0 invokes the callback URL after authenticating the user and the logout URL after removing the session cookie. If you do not set the callback and logout URLs, users will not be able to log in and out of the app, and your application will produce an error.

Add the corresponding URL to Callback URLs and Logout URLs, according to your app's platform. If you are using a custom domain, use the value of your custom domain instead of your Auth0 tenant’s domain.

iOS

BUNDLE_IDENTIFIER.auth0://${account.namespace}/ios/BUNDLE_IDENTIFIER/callback
+

To use Auth0 services, you must have an application set up in the Auth0 Dashboard. The Auth0 application is where you will configure authentication in your project.

Configure an application

Use the interactive selector to create a new Auth0 application or select an existing application that represents the project you want to integrate with. Every application in Auth0 is assigned an alphanumeric, unique client ID that your application code will use to call Auth0 APIs through the SDK.

Any settings you configure using this quickstart will automatically update for your Application in the Dashboard, which is where you can manage your Applications in the future.

To explore a complete configuration, review the sample application in your Dashboard.

Configure callback and logout URLs

Auth0 invokes the callback and logout URLs to redirect users back to your application. Auth0 invokes the callback URL after authenticating the user and the logout URL after removing the session cookie. If you do not set the callback and logout URLs, users will not be able to log in and out of the app, and your application will produce an error.

Add the corresponding URL to Callback URLs and Logout URLs, according to your app's platform. If you are using a custom domain, use the value of your custom domain instead of your Auth0 tenant’s domain.

iOS

BUNDLE_IDENTIFIER.auth0://${account.namespace}/ios/BUNDLE_IDENTIFIER/callback
 
 
@@ -30,11 +30,11 @@ locale: en-US ## Install dependencies -

In this section, you will install the React Native Auth0 module.

Refer to the official documentation for additional details on React Native.

Yarn

yarn add react-native-auth0
+

In this section, you will install the React Native Auth0 module.

Refer to the official documentation for additional details on React Native.

Yarn

yarn add react-native-auth0
 
 
-

For further reference on yarn, check their official documentation.

npm

npm install react-native-auth0 --save
+

For further reference on yarn, check their official documentation.

npm

npm install react-native-auth0 --save
 
 
@@ -53,9 +53,7 @@ pod install ## Integrate Auth0 in your application -### Configure Android - -Open the `build.gradle` file in your application directory (typically at `android/app/build.gradle`) and add the following manifest placeholders. The value for `auth0Domain` should contain your Auth0 application settings [as configured above](#get-your-application-keys). +

First, you must provide a way for your users to log in. We recommend using the Auth0-hosted login page.

An example Universal Login screen for an iOS app

Configure Android

Open the build.gradle file in your application directory (typically at android/app/build.gradle) and add the following manifest placeholders. The value for auth0Domain should contain your Auth0 application settings as configured above.

android {
 
     defaultConfig {
 
@@ -87,7 +85,7 @@ Open the `build.gradle` file in your application directory (typically at `androi
 
 
-

This file will be ios/<YOUR PROJECT>/AppDelegate.m on applications using the old architecture.

Next, add a URLScheme using your App's bundle identifier.

In the ios folder, open the Info.plist and locate the value for CFBundleIdentifier.

<key>CFBundleIdentifier</key>
+

This file will be ios/<YOUR PROJECT>/AppDelegate.m on applications using the old architecture.

Next, add a URLScheme using your App's bundle identifier.

In the ios folder, open the Info.plist and locate the value for CFBundleIdentifier.

<key>CFBundleIdentifier</key>
 
 <string>$(PRODUCT_BUNDLE_IDENTIFIER)</string>
 
@@ -121,7 +119,7 @@ Open the `build.gradle` file in your application directory (typically at `androi
 
 
-

If your application was generated using the React Native CLI, the default value of $(PRODUCT_BUNDLE_IDENTIFIER) dynamically matches org.reactjs.native.example.$(PRODUCT_NAME:rfc1034identifier). For the sample app, this value matches com.auth0samples.

In a later step, you will use this value to define the callback URLs below. You can change it using XCode with the following steps:

  • Open the ios/<YOUR PROJECT>.xcodeproj file or run xed ios on a Terminal from the app root.

  • Open your project's or desired target's Build Settings tab and find the section that contains "Bundle Identifier".

  • Replace the "Bundle Identifier" value with your desired application's bundle identifier name.

For additional information, please read react native docs.

+

If your application was generated using the React Native CLI, the default value of $(PRODUCT_BUNDLE_IDENTIFIER) dynamically matches org.reactjs.native.example.$(PRODUCT_NAME:rfc1034identifier). For the sample app, this value matches com.auth0samples.

In a later step, you will use this value to define the callback URLs below. You can change it using XCode with the following steps:

  • Open the ios/<YOUR PROJECT>.xcodeproj file or run xed ios on a Terminal from the app root.

  • Open your project's or desired target's Build Settings tab and find the section that contains "Bundle Identifier".

  • Replace the "Bundle Identifier" value with your desired application's bundle identifier name.

For additional information, please read react native docs.

## Configure the Auth0Provider component {{{ data-action="code" data-code="app.js#46:48" }}} @@ -136,7 +134,7 @@ Open the `build.gradle` file in your application directory (typically at `androi

-If your application did not launch successfully:

  • make sure the correct application is selected

  • did you save after entering your URLs?

  • ensure your domain and client ID values are correct

Still having issues? Check out our documentation or visit our community page to get more help.

+If your application did not launch successfully:

  • make sure the correct application is selected

  • did you save after entering your URLs?

  • ensure your domain and client ID values are correct

Still having issues? Check out our documentation or visit our community page to get more help.

@@ -147,7 +145,7 @@ If your application did not launch successfully:

  • make sure the cor

    -

    If your application did not launch successfully:

    • Ensure you set the Allowed Callback URLs are correct

    • Verify you saved your changes after entering your URLs

    • Make sure the domain and client ID values are imported correctly

    • If using Android, ensure you set up the manifest placeholders correctly, otherwise the redirect back to your app may not work

    Still having issues? Check out our documentation or visit our community page to get more help.

    +

    If your application did not launch successfully:

    • Ensure you set the Allowed Callback URLs are correct

    • Verify you saved your changes after entering your URLs

    • Make sure the domain and client ID values are imported correctly

    • If using Android, ensure you set up the manifest placeholders correctly, otherwise the redirect back to your app may not work

    Still having issues? Check out our documentation or visit our community page to get more help.

@@ -158,7 +156,7 @@ If your application did not launch successfully:

  • make sure the cor

    -

    If your application did not log out successfully:

    • Ensure the Allowed Logout URLs are set properly

    • Verify you saved your changes after entering your URLs

    Still having issues? Check out our documentation or visit our community page to get more help.

    +

    If your application did not log out successfully:

    • Ensure the Allowed Logout URLs are set properly

    • Verify you saved your changes after entering your URLs

    Still having issues? Check out our documentation or visit our community page to get more help.

diff --git a/articles/quickstart/native/windows-uwp-csharp/interactive.md b/articles/quickstart/native/windows-uwp-csharp/interactive.md index 3203bb951f..50f22b2190 100644 --- a/articles/quickstart/native/windows-uwp-csharp/interactive.md +++ b/articles/quickstart/native/windows-uwp-csharp/interactive.md @@ -5,7 +5,7 @@ interactive: true files: - files/MainPage.xaml github: - path: https://github.com/auth0-samples/auth0-uwp-oidc-samples/tree/master/Quickstart/00-Starter-Seed + path: Quickstart/00-Starter-Seed locale: en-US --- diff --git a/articles/quickstart/native/wpf-winforms/interactive.md b/articles/quickstart/native/wpf-winforms/interactive.md index 89085eead5..cb838b01a8 100644 --- a/articles/quickstart/native/wpf-winforms/interactive.md +++ b/articles/quickstart/native/wpf-winforms/interactive.md @@ -5,24 +5,24 @@ interactive: true files: - files/MainWindow.xaml github: - path: https://github.com/auth0-samples/auth0-WinFormsWPF-oidc-samples/tree/master/Quickstart/00-Starter-Seed + path: Quickstart/00-Starter-Seed locale: en-US --- # Add Login to Your WPF or WinForms Application -

Auth0 allows you to add authentication to almost any application type quickly. This guide demonstrates how to integrate Auth0, add authentication, and display user profile information in any WPF and WinForms application using the Auth0 SDKs for WPF and WinForms.

To use this quickstart, you’ll need to:

  • Sign up for a free Auth0 account or log in to Auth0.

  • Have a working WPF or WinForms project that you want to integrate with. Alternatively, you can view or download a sample application after logging in.

+

Auth0 allows you to add authentication to almost any application type quickly. This guide demonstrates how to integrate Auth0, add authentication, and display user profile information in any WPF and WinForms application using the Auth0 SDKs for WPF and WinForms.

To use this quickstart, you’ll need to:

  • Sign up for a free Auth0 account or log in to Auth0.

  • Have a working WPF or WinForms project that you want to integrate with. Alternatively, you can view or download a sample application after logging in.

## Configure Auth0 -

To use Auth0 services, you’ll need to have an application set up in the Auth0 Dashboard. The Auth0 application is where you will configure how you want authentication to work for the project you are developing.

Configure an application

Use the interactive selector to create a new Auth0 application or select an existing application that represents the project you want to integrate with. Every application in Auth0 is assigned an alphanumeric, unique client ID that your application code will use to call Auth0 APIs through the SDK.

Any settings you configure using this quickstart will automatically update for your Application in the Dashboard, which is where you can manage your Applications in the future.

If you would rather explore a complete configuration, you can view a sample application instead.

Configure Callback URLs

A callback URL is a URL in your application that you would like Auth0 to redirect users to after they have authenticated. If not set, users will not be returned to your application after they log in.

If you are following along with our sample project, set this to http://{yourDomain}:4200/mobile.

Configure Logout URLs

A logout URL is a URL in your application that you would like Auth0 to redirect users to after they have logged out. If not set, users will not be able to log out from your application and will receive an error.

If you are following along with our sample project, set this to http://{yourDomain}:4200/mobile.

+

To use Auth0 services, you’ll need to have an application set up in the Auth0 Dashboard. The Auth0 application is where you will configure how you want authentication to work for the project you are developing.

Configure an application

Use the interactive selector to create a new Auth0 application or select an existing application that represents the project you want to integrate with. Every application in Auth0 is assigned an alphanumeric, unique client ID that your application code will use to call Auth0 APIs through the SDK.

Any settings you configure using this quickstart will automatically update for your Application in the Dashboard, which is where you can manage your Applications in the future.

If you would rather explore a complete configuration, you can view a sample application instead.

Configure Callback URLs

A callback URL is a URL in your application that you would like Auth0 to redirect users to after they have authenticated. If not set, users will not be returned to your application after they log in.

If you are following along with our sample project, set this to http://{yourDomain}:4200/mobile.

Configure Logout URLs

A logout URL is a URL in your application that you would like Auth0 to redirect users to after they have logged out. If not set, users will not be able to log out from your application and will receive an error.

If you are following along with our sample project, set this to http://{yourDomain}:4200/mobile.

## Install the Auth0 SDK -

Auth0 provides a WPF and WinForms SDK to simplify the process of implementing Auth0 authentication in WPF and WinForms applications.

Use the NuGet Package Manager (Tools -> Library Package Manager -> Package Manager Console) to install the Auth0.OidcClient.WPF or Auth0.OidcClient.WinForms package, depending on whether you are building a WPF or Windows Forms application.

Alternatively, you can use the NuGet Package Manager Console (Install-Package) or the dotnet CLI (dotnet add).

Install-Package Auth0.OidcClient.WPF
+

Auth0 provides a WPF and WinForms SDK to simplify the process of implementing Auth0 authentication in WPF and WinForms applications.

Use the NuGet Package Manager (Tools -> Library Package Manager -> Package Manager Console) to install the Auth0.OidcClient.WPF or Auth0.OidcClient.WinForms package, depending on whether you are building a WPF or Windows Forms application.

Alternatively, you can use the NuGet Package Manager Console (Install-Package) or the dotnet CLI (dotnet add).

Install-Package Auth0.OidcClient.WPF
 
 Install-Package Auth0.OidcClient.WinForms
 
@@ -39,11 +39,11 @@ dotnet add Auth0.OidcClient.WinForms
 ## Instantiate the Auth0Client {{{ data-action="code" data-code="MainWindow.xaml.cs#13:22" }}}
 
 
-

To integrate Auth0 into your application, instantiate an instance of the Auth0Client class, passing an instance of Auth0ClientOptions that contains your Auth0 Domain and Client ID.

By default, the SDK will leverage WebView2 for .NET6 and above, while relying on the older WebView on applications using any version that predates .NET6.

WPF/WinForms Quickstart - Step 3 Checkpoint

Your Auth0Client should now be properly instantiated. Run your application to verify that:

  • The Auth0Client is instantiated correctly.

  • Your application is not throwing any errors related to Auth0.

+

To integrate Auth0 into your application, instantiate an instance of the Auth0Client class, passing an instance of Auth0ClientOptions that contains your Auth0 Domain and Client ID.

By default, the SDK will leverage WebView2 for .NET6 and above, while relying on the older WebView on applications using any version that predates .NET6.

WPF/WinForms Quickstart - Step 3 Checkpoint

Your Auth0Client should now be properly instantiated. Run your application to verify that:

  • The Auth0Client is instantiated correctly.

  • Your application is not throwing any errors related to Auth0.

-

Sorry about that. Here are a couple things to double-check:

  • make sure the correct application is selected

  • did you save after entering your URLs?

  • make sure the domain and client ID are imported correctly

Still having issues? Check out our documentation or visit our community page to get more help.

+

Sorry about that. Here are a couple things to double-check:

  • make sure the correct application is selected

  • did you save after entering your URLs?

  • make sure the domain and client ID are imported correctly

Still having issues? Check out our documentation or visit our community page to get more help.

@@ -54,7 +54,7 @@ dotnet add Auth0.OidcClient.WinForms
-

Sorry about that. Here's something to double-check:

  • you called LoginAsync as expected

Still having issues? Check out our documentation or visit our community page to get more help.

+

Sorry about that. Here's something to double-check:

  • you called LoginAsync as expected

Still having issues? Check out our documentation or visit our community page to get more help.

@@ -65,7 +65,7 @@ dotnet add Auth0.OidcClient.WinForms
-

Sorry about that. Here are a couple things to double-check:

  • you configured the correct Logout URL

  • you called LogoutAsync as expected.

Still having issues? Check out our documentation or visit our community page to get more help.

+

Sorry about that. Here are a couple things to double-check:

  • you configured the correct Logout URL

  • you called LogoutAsync as expected.

Still having issues? Check out our documentation or visit our community page to get more help.

@@ -76,6 +76,6 @@ dotnet add Auth0.OidcClient.WinForms
-

Sorry about that. Here are a couple things to double-check:

  • the LoginResult.IsError is false

  • if the LoginResult.IsError isn't false, be sure to check LoginResult.Error for details.

Still having issues? Check out our documentation or visit our community page to get more help.

+

Sorry about that. Here are a couple things to double-check:

  • the LoginResult.IsError is false

  • if the LoginResult.IsError isn't false, be sure to check LoginResult.Error for details.

Still having issues? Check out our documentation or visit our community page to get more help.

diff --git a/articles/quickstart/spa/angular/interactive.md b/articles/quickstart/spa/angular/interactive.md index 10c1117ad1..28dc113aa6 100644 --- a/articles/quickstart/spa/angular/interactive.md +++ b/articles/quickstart/spa/angular/interactive.md @@ -8,19 +8,19 @@ files: - files/logout-button - files/user-profile github: - path: https://github.com/auth0-samples/auth0-angular-samples/tree/main/Sample-01 + path: Sample-01 locale: en-US --- # Add Login to Your Angular Application -

Visit the Angular Authentication By Example guide for a deep dive into implementing user authentication in Angular. This guide provides additional details on how to create a sign-up button, add route guards, and call a protected API from Angular.

Auth0 allows you to add authentication to almost any application type quickly. This guide demonstrates how to integrate Auth0, add authentication, and display user profile information in any Angular application using the Auth0 Angular SDK.

To use this quickstart, you’ll need to:

  • Sign up for a free Auth0 account or log in to Auth0.

  • Have a working Angular project that you want to integrate with. Alternatively, you can view or download a sample application after logging in.

+

Visit the Angular Authentication By Example guide for a deep dive into implementing user authentication in Angular. This guide provides additional details on how to create a sign-up button, add route guards, and call a protected API from Angular.

Auth0 allows you to add authentication to almost any application type quickly. This guide demonstrates how to integrate Auth0, add authentication, and display user profile information in any Angular application using the Auth0 Angular SDK.

To use this quickstart, you’ll need to:

  • Sign up for a free Auth0 account or log in to Auth0.

  • Have a working Angular project that you want to integrate with. Alternatively, you can view or download a sample application after logging in.

## Configure Auth0 -

To use Auth0 services, you’ll need to have an application set up in the Auth0 Dashboard. The Auth0 application is where you will configure how you want authentication to work for the project you are developing.

Configure an application

Use the interactive selector to create a new Auth0 application or select an existing application that represents the project you want to integrate with. Every application in Auth0 is assigned an alphanumeric, unique client ID that your application code will use to call Auth0 APIs through the SDK.

Any settings you configure using this quickstart will automatically update for your Application in the Dashboard, which is where you can manage your Applications in the future.

If you would rather explore a complete configuration, you can view a sample application instead.

Configure Callback URLs

A callback URL is a URL in your application that you would like Auth0 to redirect users to after they have authenticated. If not set, users will not be returned to your application after they log in.

If you are following along with our sample project, set this to http://localhost:4200.

+

To use Auth0 services, you’ll need to have an application set up in the Auth0 Dashboard. The Auth0 application is where you will configure how you want authentication to work for the project you are developing.

Configure an application

Use the interactive selector to create a new Auth0 application or select an existing application that represents the project you want to integrate with. Every application in Auth0 is assigned an alphanumeric, unique client ID that your application code will use to call Auth0 APIs through the SDK.

Any settings you configure using this quickstart will automatically update for your Application in the Dashboard, which is where you can manage your Applications in the future.

If you would rather explore a complete configuration, you can view a sample application instead.

Configure Callback URLs

A callback URL is a URL in your application that you would like Auth0 to redirect users to after they have authenticated. If not set, users will not be returned to your application after they log in.

If you are following along with our sample project, set this to http://localhost:4200.

Configure Logout URLs

A logout URL is a URL in your application that you would like Auth0 to redirect users to after they have logged out. If not set, users will not be able to log out from your application and will receive an error.

If you are following along with our sample project, set this to http://localhost:4200.

@@ -29,42 +29,42 @@ locale: en-US ## Install the Auth0 Angular SDK -

Auth0 provides an Angular SDK to simplify the process of implementing Auth0 authentication and authorization in Angular applications.

Install the Auth0 Angular SDK by running the following command in your terminal:

npm install @auth0/auth0-angular

The SDK exposes several types that help integrate Auth0 in an Angular application idiomatically, including a module and an authentication service.

+

Auth0 provides an Angular SDK to simplify the process of implementing Auth0 authentication and authorization in Angular applications.

Install the Auth0 Angular SDK by running the following command in your terminal:

npm install @auth0/auth0-angular

The SDK exposes several types that help integrate Auth0 in an Angular application idiomatically, including a module and an authentication service.

## Register and providing Auth0 {{{ data-action="code" data-code="main.ts#7:13" }}} -

The SDK exports provideAuth0, which is a provide function that contains all the services required for the SDK to function. To register this with your application:

  1. Open the main.ts file.

  2. Import the provideAuth0 function from the @auth0/auth0-angular package.

  3. Add provideAuth0 to the application by adding it to the providers inside bootstrapApplication.

  4. Inject AuthService into AppComponent.

The provideAuth0 function takes the properties domain and clientId; the values of these properties correspond to the Domain and Client ID values that you can find under Settings in the Single-Page Application (SPA) that you registered with Auth0. On top of that, we configure authorizationParams.redirect_uri, which allows Auth0 to redirect the user back to the specific URL after successfully authenticating.

If you are using a custom domain with Auth0, the value of the domain property is the value of your custom domain instead of the value reflected in the "Settings" tab.

+

The SDK exports provideAuth0, which is a provide function that contains all the services required for the SDK to function. To register this with your application:

  1. Open the main.ts file.

  2. Import the provideAuth0 function from the @auth0/auth0-angular package.

  3. Add provideAuth0 to the application by adding it to the providers inside bootstrapApplication.

  4. Inject AuthService into AppComponent.

The provideAuth0 function takes the properties domain and clientId; the values of these properties correspond to the Domain and Client ID values that you can find under Settings in the Single-Page Application (SPA) that you registered with Auth0. On top of that, we configure authorizationParams.redirect_uri, which allows Auth0 to redirect the user back to the specific URL after successfully authenticating.

If you are using a custom domain with Auth0, the value of the domain property is the value of your custom domain instead of the value reflected in the "Settings" tab.

## Add login to your application {{{ data-action="code" data-code="login-button.ts#11:13" }}} -

Now that you have configured your Auth0 Application and the Auth0 Angular SDK, you need to set up login for your project. To do this, you will use the SDK’s loginWithRedirect() method from the AuthService class to redirect users to the Auth0 Universal Login page where Auth0 can authenticate them. After a user successfully authenticates, they will be redirected to your application and the callback URL you set up earlier in this quickstart.

Create a login button in your application that calls loginWithRedirect() when selected.

Angular Step 4 Checkpoint

You should now be able to log in to your application.

Run your application, and select the login button. Verify that:

  • you can log in or sign up using a username and password.

  • your application redirects you to the Auth0 Universal Login page.

  • you are redirected to Auth0 for authentication.

  • Auth0 successfully redirects back to your application after authentication.

  • you do not receive any errors in the console related to Auth0.

+

Now that you have configured your Auth0 Application and the Auth0 Angular SDK, you need to set up login for your project. To do this, you will use the SDK’s loginWithRedirect() method from the AuthService class to redirect users to the Auth0 Universal Login page where Auth0 can authenticate them. After a user successfully authenticates, they will be redirected to your application and the callback URL you set up earlier in this quickstart.

Create a login button in your application that calls loginWithRedirect() when selected.

Angular Step 4 Checkpoint

You should now be able to log in to your application.

Run your application, and select the login button. Verify that:

  • you can log in or sign up using a username and password.

  • your application redirects you to the Auth0 Universal Login page.

  • you are redirected to Auth0 for authentication.

  • Auth0 successfully redirects back to your application after authentication.

  • you do not receive any errors in the console related to Auth0.

-

Sorry about that. Here are a few things to double check:

  • make sure you configured the correct authorizationParams.redirect_uri

  • make sure you added theLoginButtonComponent button to the module's declarations

Still having issues? To get more help, check out our documentation or visit our community page.

+

Sorry about that. Here are a few things to double check:

  • make sure you configured the correct authorizationParams.redirect_uri

  • make sure you added theLoginButtonComponent button to the module's declarations

Still having issues? To get more help, check out our documentation or visit our community page.

## Add logout to your application {{{ data-action="code" data-code="logout-button.ts#19:25" }}} -

Users who log in to your project will also need a way to log out. The SDK provides a logout() method on the AuthService class that you can use to log a user out of your app. When users log out, they will be redirected to your Auth0 logout endpoint, which will then immediately redirect them to your application and the logout URL you set up earlier in this quickstart.

Create a logout button in your application that calls logout() when selected.

The SDK exposes an isAuthenticated$ observable on the AuthService class that allows you to check whether a user is authenticated or not. You can render the login and logout buttons conditionally based on the value of the isAuthenticated$ observable. Alternatively, you can use a single button to combine both login and logout buttons as well as their conditional rendering.

Angular Step 5 checkpoint

You should now be able to log out of your application.

Run your application, log in, and select the logout button. Verify that:

  • you are redirected to Auth0's logout endpoint.

  • Auth0 successfully redirects back to your application and the correct logout URL.

  • you are no longer logged in to your application.

  • you do not receive any errors in the console related to Auth0.

+

Users who log in to your project will also need a way to log out. The SDK provides a logout() method on the AuthService class that you can use to log a user out of your app. When users log out, they will be redirected to your Auth0 logout endpoint, which will then immediately redirect them to your application and the logout URL you set up earlier in this quickstart.

Create a logout button in your application that calls logout() when selected.

The SDK exposes an isAuthenticated$ observable on the AuthService class that allows you to check whether a user is authenticated or not. You can render the login and logout buttons conditionally based on the value of the isAuthenticated$ observable. Alternatively, you can use a single button to combine both login and logout buttons as well as their conditional rendering.

Angular Step 5 checkpoint

You should now be able to log out of your application.

Run your application, log in, and select the logout button. Verify that:

  • you are redirected to Auth0's logout endpoint.

  • Auth0 successfully redirects back to your application and the correct logout URL.

  • you are no longer logged in to your application.

  • you do not receive any errors in the console related to Auth0.

-

Sorry about that. Here are a few things to double check:

  • make sure that you configured the logout URL as one of the Allowed Logout URLS in your application's Settings

  • check that you added the LogoutButtonComponent to the module's declarations

  • inspect the application logs for further errors

Still having issues? To get more help, check out our documentation or visit our community page.

+

Sorry about that. Here are a few things to double check:

  • make sure that you configured the logout URL as one of the Allowed Logout URLS in your application's Settings

  • check that you added the LogoutButtonComponent to the module's declarations

  • inspect the application logs for further errors

Still having issues? To get more help, check out our documentation or visit our community page.

## Show user profile information {{{ data-action="code" data-code="user-profile.ts" }}} -

Now that your users can log in and log out, you will likely want to be able to retrieve the profile information associated with authenticated users. For example, you may want to be able to personalize the user interface by displaying a logged-in user’s name or profile picture.

The Auth0 Angular SDK provides user information through the user$ observable exposed by the AuthService class. Because the user$ observable contains sensitive information and artifacts related to the user's identity, its availability depends on the user's authentication status. Fortunately, the user$ observable is configured to only emit values once the isAuthenticated$ observable is true, so there is no need to manually check the authentication state before accessing the user profile data.

The SDK also exposes an isAuthenticated$ observable on the AuthService class that allows you to check whether a user is authenticated or not, which you can use to determine whether to show or hide UI elements, for example.

Review the UserProfileComponent code in the interactive panel to see examples of how to use these functions.

Angular Step 6 Checkpoint

You should now be able to view user profile information.

Run your application, and verify that:

  • user information displays correctly after you have logged in.

  • user information does not display after you have logged out.

+

Now that your users can log in and log out, you will likely want to be able to retrieve the profile information associated with authenticated users. For example, you may want to be able to personalize the user interface by displaying a logged-in user’s name or profile picture.

The Auth0 Angular SDK provides user information through the user$ observable exposed by the AuthService class. Because the user$ observable contains sensitive information and artifacts related to the user's identity, its availability depends on the user's authentication status. Fortunately, the user$ observable is configured to only emit values once the isAuthenticated$ observable is true, so there is no need to manually check the authentication state before accessing the user profile data.

The SDK also exposes an isAuthenticated$ observable on the AuthService class that allows you to check whether a user is authenticated or not, which you can use to determine whether to show or hide UI elements, for example.

Review the UserProfileComponent code in the interactive panel to see examples of how to use these functions.

Angular Step 6 Checkpoint

You should now be able to view user profile information.

Run your application, and verify that:

  • user information displays correctly after you have logged in.

  • user information does not display after you have logged out.

-

Sorry about that. Here are a few things to double check:

  • make sure you are logged in

  • make sure you are trying to access an existing property such as user.name

  • make sure you added the UserProfileComponent component to the correct module's declarations

Still having issues? To get more help, check out our documentation or visit our community page.

+

Sorry about that. Here are a few things to double check:

  • make sure you are logged in

  • make sure you are trying to access an existing property such as user.name

  • make sure you added the UserProfileComponent component to the correct module's declarations

Still having issues? To get more help, check out our documentation or visit our community page.

diff --git a/articles/quickstart/spa/flutter/interactive.md b/articles/quickstart/spa/flutter/interactive.md index 593acedc79..1b0393eb7a 100644 --- a/articles/quickstart/spa/flutter/interactive.md +++ b/articles/quickstart/spa/flutter/interactive.md @@ -6,19 +6,19 @@ files: - files/main_view - files/profile_view github: - path: https://github.com/auth0-samples/auth0-flutter-samples/tree/main/sample + path: sample locale: en-US --- # Add Login to Your Flutter Application -

Auth0 allows you to quickly add authentication and access user profile information in your application. This guide demonstrates how to integrate Auth0 with a Flutter application using the Auth0 Flutter SDK.

The Flutter SDK currently only supports Flutter applications running on Android, iOS, or Web platforms.

This quickstart assumes you already have a Flutter application up and running. If not, check out the Flutter "getting started" guides to get started with a simple app.

You should also be familiar with the Flutter command line tool.

+

Auth0 allows you to quickly add authentication and access user profile information in your application. This guide demonstrates how to integrate Auth0 with a Flutter application using the Auth0 Flutter SDK.

The Flutter SDK currently only supports Flutter applications running on Android, iOS, or Web platforms.

This quickstart assumes you already have a Flutter application up and running. If not, check out the Flutter "getting started" guides to get started with a simple app.

You should also be familiar with the Flutter command line tool.

## Configure Auth0 -

When you signed up for Auth0, a new application was created for you, or you could have created a new one. You will need some details about that application to communicate with Auth0. You can get these details from the Application Settings section in the Auth0 dashboard.

When using the Default App with a Native or Single Page Application, ensure to update the Token Endpoint Authentication Method to None and set the Application Type to either SPA or Native.

You need the following information:

  • Domain

  • Client ID

If you download the sample from the top of this page, these details are filled out for you.

Configure Callback URLs

A callback URL is a URL in your application where Auth0 redirects the user after they have authenticated. The callback URL for your app must be added to the Allowed Callback URLs field in your Application Settings. If this field is not set, users will be unable to log in to the application and will get an error.

If you are following along with the sample project you downloaded from the top of this page, you should set the Allowed Callback URL to http://localhost:3000.

Configure Logout URLs

A logout URL is a URL in your application that Auth0 can return to after the user has been logged out of the authorization server. This is specified in the returnTo query parameter. The logout URL for your app must be added to the Allowed Logout URLs field in your Application Settings. If this field is not set, users will be unable to log out from the application and will get an error.

If you are following along with the sample project you downloaded from the top of this page, the logout URL you need to add to the Allowed Logout URLs field is http://localhost:3000.

Configure Allowed Web Origins

You need to add the URL for your app to the Allowed Web Origins field in your Application Settings. If you don't register your application URL here, the application will be unable to silently refresh the authentication tokens and your users will be logged out the next time they visit the application, or refresh the page.

If you are following along with the sample project you downloaded from the top of this page, you should set the Allowed Web Origins to http://localhost:3000.

+

When you signed up for Auth0, a new application was created for you, or you could have created a new one. You will need some details about that application to communicate with Auth0. You can get these details from the Application Settings section in the Auth0 dashboard.

When using the Default App with a Native or Single Page Application, ensure to update the Token Endpoint Authentication Method to None and set the Application Type to either SPA or Native.

You need the following information:

  • Domain

  • Client ID

If you download the sample from the top of this page, these details are filled out for you.

Configure Callback URLs

A callback URL is a URL in your application where Auth0 redirects the user after they have authenticated. The callback URL for your app must be added to the Allowed Callback URLs field in your Application Settings. If this field is not set, users will be unable to log in to the application and will get an error.

If you are following along with the sample project you downloaded from the top of this page, you should set the Allowed Callback URL to http://localhost:3000.

Configure Logout URLs

A logout URL is a URL in your application that Auth0 can return to after the user has been logged out of the authorization server. This is specified in the returnTo query parameter. The logout URL for your app must be added to the Allowed Logout URLs field in your Application Settings. If this field is not set, users will be unable to log out from the application and will get an error.

If you are following along with the sample project you downloaded from the top of this page, the logout URL you need to add to the Allowed Logout URLs field is http://localhost:3000.

Configure Allowed Web Origins

You need to add the URL for your app to the Allowed Web Origins field in your Application Settings. If you don't register your application URL here, the application will be unable to silently refresh the authentication tokens and your users will be logged out the next time they visit the application, or refresh the page.

If you are following along with the sample project you downloaded from the top of this page, you should set the Allowed Web Origins to http://localhost:3000.

## Install the Auth0 Flutter SDK @@ -36,7 +36,7 @@ locale: en-US ## Add login to your application {{{ data-action="code" data-code="main_view.dart" }}} -

Universal Login is the easiest way to set up authentication in your application. We recommend using it for the best experience, best security, and the fullest array of features.

Integrate Auth0 Universal Login in your Flutter Web app by using the Auth0Web class. Redirect your users to the Auth0 Universal Login page using loginWithRedirect().

You will normally need to specify the redirectUrl parameter to loginWithRedirect. Omitting this will cause Auth0 to use the default login route, which is not configured by default.

When a user logs in, they are redirected back to your application. You are then able to access the ID and access tokens for this user by calling onLoad during startup and handling the credentials that are given to you:

auth0.onLoad().then((final credentials) => setState(() {
+

Universal Login is the easiest way to set up authentication in your application. We recommend using it for the best experience, best security, and the fullest array of features.

Integrate Auth0 Universal Login in your Flutter Web app by using the Auth0Web class. Redirect your users to the Auth0 Universal Login page using loginWithRedirect().

You will normally need to specify the redirectUrl parameter to loginWithRedirect. Omitting this will cause Auth0 to use the default login route, which is not configured by default.

When a user logs in, they are redirected back to your application. You are then able to access the ID and access tokens for this user by calling onLoad during startup and handling the credentials that are given to you:

auth0.onLoad().then((final credentials) => setState(() {
 
     // Handle or store credentials here
 
@@ -50,18 +50,18 @@ locale: en-US
 
   
-

If your application did not launch successfully:

  • Ensure the Allowed Callback URLs are set properly

  • Verify you saved your changes after entering your URLs

  • Make sure the domain and client ID values are imported correctly

Still having issues? Check out our documentation or visit our community page to get more help.

+

If your application did not launch successfully:

  • Ensure the Allowed Callback URLs are set properly

  • Verify you saved your changes after entering your URLs

  • Make sure the domain and client ID values are imported correctly

Still having issues? Check out our documentation or visit our community page to get more help.

## Add logout to your application -

To log users out, redirect them to the Auth0 logout endpoint to clear their login session by calling the Auth0 Flutter SDK logout(). Read more about logging out of Auth0.

You will normally want to specify returnToUrl when calling logout, otherwise Auth0 will default to the first URL in the Allowed Logout URLs list.

Flutter web step 4 checkpoint

Add a button to your app that calls logout() and logs the user out of your application. When you select it, verify that your Flutter app redirects you to the logout endpoint and back again. You should not be logged in to your application.

+

To log users out, redirect them to the Auth0 logout endpoint to clear their login session by calling the Auth0 Flutter SDK logout(). Read more about logging out of Auth0.

You will normally want to specify returnToUrl when calling logout, otherwise Auth0 will default to the first URL in the Allowed Logout URLs list.

Flutter web step 4 checkpoint

Add a button to your app that calls logout() and logs the user out of your application. When you select it, verify that your Flutter app redirects you to the logout endpoint and back again. You should not be logged in to your application.

-

If your application did not log out successfully:

  • Ensure the Allowed Logout URLs are set properly

  • Verify you saved your changes after entering your URLs

Still having issues? Check out our documentation or visit our community page to get more help.

+

If your application did not log out successfully:

  • Ensure the Allowed Logout URLs are set properly

  • Verify you saved your changes after entering your URLs

Still having issues? Check out our documentation or visit our community page to get more help.

@@ -72,6 +72,6 @@ locale: en-US
-

If your application did not return user profile information:

  • Verify the ID token is valid

Still having issues? Check out our documentation or visit our community page to get more help.

+

If your application did not return user profile information:

  • Verify the ID token is valid

Still having issues? Check out our documentation or visit our community page to get more help.

diff --git a/articles/quickstart/spa/react/interactive.md b/articles/quickstart/spa/react/interactive.md index afd67c79dc..148042b826 100644 --- a/articles/quickstart/spa/react/interactive.md +++ b/articles/quickstart/spa/react/interactive.md @@ -8,66 +8,66 @@ files: - files/logout - files/profile github: - path: https://github.com/auth0-samples/auth0-react-samples/tree/master/Sample-01 + path: Sample-01 locale: en-US --- # Add Login to your React Application -

Auth0 allows you to add authentication to almost any application type quickly. This guide demonstrates how to integrate Auth0, add authentication, and display user profile information in any React application using the Auth0 React SDK.

To use this quickstart, you’ll need to:

  • Sign up for a free Auth0 account or log in to Auth0.

  • Have a working React project that you want to integrate with. Alternatively, you can view or download a sample application after logging in.

Visit the React Authentication By Example guide for a deep dive into implementing user authentication in React. This guide provides additional details on how to create a sign-up button, add route guards using React Router, and call a protected API from React.

+

Auth0 allows you to add authentication to almost any application type quickly. This guide demonstrates how to integrate Auth0, add authentication, and display user profile information in any React application using the Auth0 React SDK. Test

To use this quickstart, you’ll need to:

  • Sign up for a free Auth0 account or log in to Auth0.

  • Have a working React project that you want to integrate with. Alternatively, you can view or download a sample application after logging in.

Visit the React Authentication By Example guide for a deep dive into implementing user authentication in React. This guide provides additional details on how to create a sign-up button, add route guards using React Router, and call a protected API from React.

## Configure Auth0 -

To use Auth0 services, you’ll need to have an application set up in the Auth0 Dashboard. The Auth0 application is where you will configure how you want authentication to work for the project you are developing.

Configure an application

Use the interactive selector to create a new Auth0 application or select an existing application that represents the project you want to integrate with. Every application in Auth0 is assigned an alphanumeric, unique client ID that your application code will use to call Auth0 APIs through the SDK.

Any settings you configure using this quickstart will automatically update for your Application in the Dashboard, which is where you can manage your Applications in the future.

If you would rather explore a complete configuration, you can view a sample application instead.

Configure Callback URLs

A callback URL is a URL in your application that you would like Auth0 to redirect users to after they have authenticated. If not set, users will not be returned to your application after they log in.

If you are following along with our sample project, set this to http://localhost:3000.

Configure Logout URLs

A logout URL is a URL in your application that you would like Auth0 to redirect users to after they have logged out. If not set, users will not be able to log out from your application and will receive an error.

If you are following along with our sample project, set this to http://localhost:3000.

Configure Allowed Web Origins

An Allowed Web Origin is a URL that you want to be allowed to access to your authentication flow. This must contain the URL of your project. If not properly set, your project will be unable to silently refresh authentication tokens, so your users will be logged out the next time they visit your application or refresh a page.

If you are following along with our sample project, set this to http://localhost:3000.

+

To use Auth0 services, you’ll need to have an application set up in the Auth0 Dashboard. The Auth0 application is where you will configure how you want authentication to work for the project you are developing.

Configure an application

Use the interactive selector to create a new Auth0 application or select an existing application that represents the project you want to integrate with. Every application in Auth0 is assigned an alphanumeric, unique client ID that your application code will use to call Auth0 APIs through the SDK.

Any settings you configure using this quickstart will automatically update for your Application in the Dashboard, which is where you can manage your Applications in the future.

If you would rather explore a complete configuration, you can view a sample application instead.

Configure Callback URLs

A callback URL is a URL in your application that you would like Auth0 to redirect users to after they have authenticated. If not set, users will not be returned to your application after they log in.

If you are following along with our sample project, set this to http://localhost:3000.

Configure Logout URLs

A logout URL is a URL in your application that you would like Auth0 to redirect users to after they have logged out. If not set, users will not be able to log out from your application and will receive an error.

If you are following along with our sample project, set this to http://localhost:3000.

Configure Allowed Web Origins

An Allowed Web Origin is a URL that you want to be allowed to access to your authentication flow. This must contain the URL of your project. If not properly set, your project will be unable to silently refresh authentication tokens, so your users will be logged out the next time they visit your application or refresh a page.

If you are following along with our sample project, set this to http://localhost:3000.

## Install the Auth0 React SDK {{{ data-action="code" data-code="index.js" }}} -

Auth0 provides a React SDK (auth0-react.js) to simplify the process of implementing Auth0 authentication and authorization in React apps.

Install the Auth0 React SDK by running the following commands in your terminal:

cd <your-project-directory>
+

Auth0 provides a React SDK (auth0-react.js) to simplify the process of implementing Auth0 authentication and authorization in React apps.

Install the Auth0 React SDK by running the following commands in your terminal:

cd <your-project-directory>
 
 npm install @auth0/auth0-react
 
 
-

Configure the Auth0Provider component

For the SDK to function properly, you must set the following properties in the Auth0Provider component:

  • domain: The domain of your Auth0 tenant. Generally, you can find this in the Auth0 Dashboard under your Application's Settings in the Domain field. If you are using a custom domain, you should set this to the value of your custom domain instead.

  • clientId: The ID of the Auth0 Application you set up earlier in this quickstart. You can find this in the Auth0 Dashboard under your Application's Settings in the Client ID field.

  • authorizationParams.redirect_uri: The URL in your application that you would like Auth0 to redirect users to after they have authenticated. This corresponds to the callback URL you set up earlier in this quickstart. You can also find this value in the Auth0 Dashboard under your Application's Settings in the Callback URLs field. Make sure what you enter in your code matches what you set up earlier or your users will see an error.

React Quickstart - Step 2 Checkpoint

Your Auth0Provider component should now be properly configured. Run your application to verify that:

  • The SDK is initializing correctly.

  • Your application is not throwing any errors related to Auth0.

+

Configure the Auth0Provider component

For the SDK to function properly, you must set the following properties in the Auth0Provider component:

  • domain: The domain of your Auth0 tenant. Generally, you can find this in the Auth0 Dashboard under your Application's Settings in the Domain field. If you are using a custom domain, you should set this to the value of your custom domain instead.

  • clientId: The ID of the Auth0 Application you set up earlier in this quickstart. You can find this in the Auth0 Dashboard under your Application's Settings in the Client ID field.

  • authorizationParams.redirect_uri: The URL in your application that you would like Auth0 to redirect users to after they have authenticated. This corresponds to the callback URL you set up earlier in this quickstart. You can also find this value in the Auth0 Dashboard under your Application's Settings in the Callback URLs field. Make sure what you enter in your code matches what you set up earlier or your users will see an error.

React Quickstart - Step 2 Checkpoint

Your Auth0Provider component should now be properly configured. Run your application to verify that:

  • The SDK is initializing correctly.

  • Your application is not throwing any errors related to Auth0.

-

Sorry about that. Here's a couple things to double check:

  • make sure the correct application is selected

  • did you save after entering your URLs?

  • make sure the domain and client ID imported correctly

Still having issues? Check out our documentation or visit our community page to get more help.

+

Sorry about that. Here's a couple things to double check:

  • make sure the correct application is selected

  • did you save after entering your URLs?

  • make sure the domain and client ID imported correctly

Still having issues? Check out our documentation or visit our community page to get more help.

## Add login to your application {{{ data-action="code" data-code="login.js" }}} -

Now that you have configured your Auth0 Application and the Auth0 React SDK, you need to set up login for your project. To do this, you will use the SDK’s loginWithRedirect() method to create a login button that redirects users to the Auth0 Universal Login page. After a user successfully authenticates, they will be redirected to the callback URL you set up earlier in this quickstart.

This guide focuses on using the useAuth0() custom React Hook. If you are using class components, check out these samples using the withAuth0() higher-order component.

Create a new file in your application called login.js for the login button component, and copy in the code from the interactive panel to the right, which contains the logic needed for login. Then, update your index.js file to include the new login button.

React Quickstart - Step 3 Checkpoint

You should now be able to log in or sign up using a username and password.

Click the login button and verify that:

  • Your React Application redirects you to the Auth0 Universal Login page.

  • You can log in or sign up.

  • Auth0 redirects you to your application using the value of the authorizationParams.redirect_uri you used to configure the Auth0Provider.

+

Now that you have configured your Auth0 Application and the Auth0 React SDK, you need to set up login for your project. To do this, you will use the SDK’s loginWithRedirect() method to create a login button that redirects users to the Auth0 Universal Login page. After a user successfully authenticates, they will be redirected to the callback URL you set up earlier in this quickstart.

This guide focuses on using the useAuth0() custom React Hook. If you are using class components, check out these samples using the withAuth0() higher-order component.

Create a new file in your application called login.js for the login button component, and copy in the code from the interactive panel to the right, which contains the logic needed for login. Then, update your index.js file to include the new login button.

React Quickstart - Step 3 Checkpoint

You should now be able to log in or sign up using a username and password.

Click the login button and verify that:

  • Your React Application redirects you to the Auth0 Universal Login page.

  • You can log in or sign up.

  • Auth0 redirects you to your application using the value of the authorizationParams.redirect_uri you used to configure the Auth0Provider.

-

Sorry about that. Here's a couple things to double check:

  • you configured the correct authorizationParams.redirect_uri

  • you added the Login button to the index.js file

Still having issues? Check out our documentation or visit our community page to get more help.

+

Sorry about that. Here's a couple things to double check:

  • you configured the correct authorizationParams.redirect_uri

  • you added the Login button to the index.js file

Still having issues? Check out our documentation or visit our community page to get more help.

## Add logout to your application {{{ data-action="code" data-code="logout.js" }}} -

Users who log in to your project will also need a way to log out. Create a logout button using the SDK’s logout() method. When users log out, they will be redirected to your Auth0 logout endpoint, which will then immediately redirect them to the logout URL you set up earlier in this quickstart.

Create a new file in your application called logout.js for the logout button component, and copy in the code from the interactive panel, which contains the logic needed for logout. Then, update your index.js file to include the logout button.

React Quickstart - Step 4 Checkpoint

Run your application and click the logout button, verify that:

  • Your React application redirects you to the address you specified as one of the Allowed Logout URLs in your Application Settings.

  • You are no longer logged in to your application.

+

Users who log in to your project will also need a way to log out. Create a logout button using the SDK’s logout() method. When users log out, they will be redirected to your Auth0 logout endpoint, which will then immediately redirect them to the logout URL you set up earlier in this quickstart.

Create a new file in your application called logout.js for the logout button component, and copy in the code from the interactive panel, which contains the logic needed for logout. Then, update your index.js file to include the logout button.

React Quickstart - Step 4 Checkpoint

Run your application and click the logout button, verify that:

  • Your React application redirects you to the address you specified as one of the Allowed Logout URLs in your Application Settings.

  • You are no longer logged in to your application.

-

Sorry about that. Here's a couple things to double check:

  • you configured the correct Logout URL

  • you added the Logout button to the index.js file

Still having issues? Check out our documentation or visit our community page to get more help.

+

Sorry about that. Here's a couple things to double check:

  • you configured the correct Logout URL

  • you added the Logout button to the index.js file

Still having issues? Check out our documentation or visit our community page to get more help.

## Show User Profile Information {{{ data-action="code" data-code="profile.js" }}} -

Now that your users can log in and log out, you will likely want to be able to retrieve the profile information associated with authenticated users. For example, you may want to be able to display a logged-in user’s name or profile picture in your project.

The Auth0 React SDK provides user information through the user property. Review the profile.js code in the interactive panel to see an example of how to use it.

Because the user property contains sensitive information related to the user's identity, its availability depends on the user's authentication status. To prevent render errors, you should always:

  • Use the isAuthenticated property to determine whether Auth0 has authenticated the user before React renders any component that consumes the user property.

  • Ensure that the SDK has finished loading by checking that isLoading is false before accessing the isAuthenticated property.

React Quickstart - Step 5 Checkpoint

Verify that:

  • You can display the user.name or any other user property within a component correctly after you have logged in.

+

Now that your users can log in and log out, you will likely want to be able to retrieve the profile information associated with authenticated users. For example, you may want to be able to display a logged-in user’s name or profile picture in your project.

The Auth0 React SDK provides user information through the user property. Review the profile.js code in the interactive panel to see an example of how to use it.

Because the user property contains sensitive information related to the user's identity, its availability depends on the user's authentication status. To prevent render errors, you should always:

  • Use the isAuthenticated property to determine whether Auth0 has authenticated the user before React renders any component that consumes the user property.

  • Ensure that the SDK has finished loading by checking that isLoading is false before accessing the isAuthenticated property.

React Quickstart - Step 5 Checkpoint

Verify that:

  • You can display the user.name or any other user property within a component correctly after you have logged in.

-

Sorry about that. Here's a couple things to double check:

  • you added the isLoading check before accessing the isAuthenticated property

  • you added the Profile component to the index.js file

Still having issues? Check out our documentation or visit our community page to get more help.

+

Sorry about that. Here's a couple things to double check:

  • you added the isLoading check before accessing the isAuthenticated property

  • you added the Profile component to the index.js file

Still having issues? Check out our documentation or visit our community page to get more help.

diff --git a/articles/quickstart/spa/vanillajs/interactive.md b/articles/quickstart/spa/vanillajs/interactive.md index eab7b5deba..6e52ab3a31 100644 --- a/articles/quickstart/spa/vanillajs/interactive.md +++ b/articles/quickstart/spa/vanillajs/interactive.md @@ -5,19 +5,19 @@ interactive: true files: - files/app github: - path: https://github.com/auth0-samples/auth0-javascript-samples/tree/master/01-Login + path: 01-Login locale: en-US --- # Add Login to Your JavaScript Application -

Auth0 allows you to add authentication to almost any application type quickly. This guide demonstrates how to integrate Auth0, add authentication, and display user profile information in a Single-Page Application (SPA) that uses plain JavaScript, using the Auth0 SPA SDK.

To use this quickstart, you’ll need to:

  • Sign up for a free Auth0 account or log in to Auth0.

  • Have a working project that you want to integrate with. Alternatively, you can view or download a sample application after logging in.

This quickstart assumes you are adding Auth0 to a plain JavaScript application, as opposed to using a framework such as React or Angular.

+

Auth0 allows you to add authentication to almost any application type quickly. This guide demonstrates how to integrate Auth0, add authentication, and display user profile information in a Single-Page Application (SPA) that uses plain JavaScript, using the Auth0 SPA SDK.

To use this quickstart, you’ll need to:

  • Sign up for a free Auth0 account or log in to Auth0.

  • Have a working project that you want to integrate with. Alternatively, you can view or download a sample application after logging in.

This quickstart assumes you are adding Auth0 to a plain JavaScript application, as opposed to using a framework such as React or Angular.

## Configure Auth0 -

To use Auth0 services, you’ll need to have an application set up in the Auth0 Dashboard. The Auth0 application is where you will configure how you want authentication to work for the project you are developing.

Configure an application

Use the interactive selector to create a new Auth0 application or select an existing application that represents the project you want to integrate with. Every application in Auth0 is assigned an alphanumeric, unique client ID that your application code will use to call Auth0 APIs through the SDK.

Any settings you configure using this quickstart will automatically update for your Application in the Dashboard, which is where you can manage your Applications in the future.

If you would rather explore a complete configuration, you can view a sample application instead.

Configure Callback URLs

A callback URL is a URL in your application that you would like Auth0 to redirect users to after they have authenticated. If not set, users will not be returned to your application after they log in.

If you are following along with our sample project, set this to http://localhost:3000.

Configure Logout URLs

A logout URL is a URL in your application that you would like Auth0 to redirect users to after they have logged out. If not set, users will not be able to log out from your application and will receive an error.

If you are following along with our sample project, set this to http://localhost:3000.

Configure Allowed Web Origins

An Allowed Web Origin is a URL that you want to be allowed to access to your authentication flow. This must contain the URL of your project. If not properly set, your project will be unable to silently refresh authentication tokens, so your users will be logged out the next time they visit your application or refresh a page.

If you are following along with our sample project, set this to http://localhost:3000.

+

To use Auth0 services, you’ll need to have an application set up in the Auth0 Dashboard. The Auth0 application is where you will configure how you want authentication to work for the project you are developing.

Configure an application

Use the interactive selector to create a new Auth0 application or select an existing application that represents the project you want to integrate with. Every application in Auth0 is assigned an alphanumeric, unique client ID that your application code will use to call Auth0 APIs through the SDK.

Any settings you configure using this quickstart will automatically update for your Application in the Dashboard, which is where you can manage your Applications in the future.

If you would rather explore a complete configuration, you can view a sample application instead.

Configure Callback URLs

A callback URL is a URL in your application that you would like Auth0 to redirect users to after they have authenticated. If not set, users will not be returned to your application after they log in.

If you are following along with our sample project, set this to http://localhost:3000.

Configure Logout URLs

A logout URL is a URL in your application that you would like Auth0 to redirect users to after they have logged out. If not set, users will not be able to log out from your application and will receive an error.

If you are following along with our sample project, set this to http://localhost:3000.

Configure Allowed Web Origins

An Allowed Web Origin is a URL that you want to be allowed to access to your authentication flow. This must contain the URL of your project. If not properly set, your project will be unable to silently refresh authentication tokens, so your users will be logged out the next time they visit your application or refresh a page.

If you are following along with our sample project, set this to http://localhost:3000.

## Add the Auth0 SPA SDK @@ -36,11 +36,11 @@ locale: en-US ## Add login to your application {{{ data-action="code" data-code="app.js#8:14" }}} -

Now that you have configured your Auth0 Application, added the Auth0 SPA SDK, and created the Auth0 client, you need to set up login for your project. To do this, you will use the SDK’s loginWithRedirect() method to redirect users to the Auth0 Universal Login page where Auth0 can authenticate them. After a user successfully authenticates, they will be redirected to the callback URL you set up earlier in this quickstart.

Create a login button in your application that calls loginWithRedirect() when selected.

Javascript quickstart step 4 checkpoint

You should now be able to log in to your application.

Run your application, and select the login button. Verify that:

  • you can log in or sign up using a username and password

  • your application redirects you to the Auth0 Universal Login page

  • you are redirected to Auth0 for authentication

  • Auth0 successfully redirects back to your application after authentication

  • you do not receive any errors in the console related to Auth0

+

Now that you have configured your Auth0 Application, added the Auth0 SPA SDK, and created the Auth0 client, you need to set up login for your project. To do this, you will use the SDK’s loginWithRedirect() method to redirect users to the Auth0 Universal Login page where Auth0 can authenticate them. After a user successfully authenticates, they will be redirected to the callback URL you set up earlier in this quickstart.

Create a login button in your application that calls loginWithRedirect() when selected.

Javascript quickstart step 4 checkpoint

You should now be able to log in to your application.

Run your application, and select the login button. Verify that:

  • you can log in or sign up using a username and password

  • your application redirects you to the Auth0 Universal Login page

  • you are redirected to Auth0 for authentication

  • Auth0 successfully redirects back to your application after authentication

  • you do not receive any errors in the console related to Auth0

-

Sorry about that. Here are a few things to double check:

  • make sure that the correct application is selected

  • make sure you saved after entering your URLs

  • make sure the Auth0 client has been correctly configured with your Auth0 domain and client ID

Still having issues? To get more help, check out our documentation or visit our community page.

+

Sorry about that. Here are a few things to double check:

  • make sure that the correct application is selected

  • make sure you saved after entering your URLs

  • make sure the Auth0 client has been correctly configured with your Auth0 domain and client ID

Still having issues? To get more help, check out our documentation or visit our community page.

@@ -51,30 +51,30 @@ locale: en-US
-

Sorry about that. Here are a few things to double check:

  • check that the redirect_uri option has been configured to your application's URL

  • if you have an error query parameter, inspect it to learn the cause of the error

Still having issues? To get more help, check out our documentation or visit our community page.

+

Sorry about that. Here are a few things to double check:

  • check that the redirect_uri option has been configured to your application's URL

  • if you have an error query parameter, inspect it to learn the cause of the error

Still having issues? To get more help, check out our documentation or visit our community page.

## Add logout to your application {{{ data-action="code" data-code="app.js#23:29" }}} -

Users who log in to your project will also need a way to log out. The Auth0 client provides a logout() method that you can use to log a user out of your app. When users log out, they will be redirected to your Auth0 logout endpoint, which will then immediately redirect them to your application and the logout URL you set up earlier in this quickstart.

Create a logout button in your application that calls logout() when selected.

The SDK exposes an isAuthenticated() function that allows you to check whether a user is authenticated or not. You can render the login and logout buttons conditionally based on the value of the isAuthenticated() function. Alternatively, you can use a single button to combine both login and logout buttons as well as their conditional rendering.

javascript quickstart step 6 checkpoint

+

Users who log in to your project will also need a way to log out. The Auth0 client provides a logout() method that you can use to log a user out of your app. When users log out, they will be redirected to your Auth0 logout endpoint, which will then immediately redirect them to your application and the logout URL you set up earlier in this quickstart.

Create a logout button in your application that calls logout() when selected.

The SDK exposes an isAuthenticated() function that allows you to check whether a user is authenticated or not. You can render the login and logout buttons conditionally based on the value of the isAuthenticated() function. Alternatively, you can use a single button to combine both login and logout buttons as well as their conditional rendering.

javascript quickstart step 6 checkpoint

You should now be able to log out of your application.

Run your application, log in, and select the logout button. Verify that:

  • you are redirected to Auth0's logout endpoint.

  • Auth0 successfully redirects back to your application and the correct logout URL.

  • you are no longer logged in to your application.

  • you do not receive any errors in the console related to Auth0.

-

Sorry about that. Here are a few things to double check:

  • make sure that you configured the logout URL as one of the Allowed Logout URLS in your application's Settings

  • inspect the application logs for further errors

Still having issues? To get more help, check out our documentation or visit our community page.

+

Sorry about that. Here are a few things to double check:

  • make sure that you configured the logout URL as one of the Allowed Logout URLS in your application's Settings

  • inspect the application logs for further errors

Still having issues? To get more help, check out our documentation or visit our community page.

## Show user profile information {{{ data-action="code" data-code="app.js#31:45" }}} -

Now that your users can log in and log out, you will likely want to be able to retrieve the profile information associated with authenticated users. For example, you may want to be able to personalize the user interface by displaying a logged-in user’s name or profile picture.

The Auth0 SPA SDK provides user information through the getUser() function exposed by the Auth0 client. The Auth0 client also exposes an isAuthenticated() function that allows you to check whether a user is authenticated or not, which you can use to determine whether to show or hide UI elements, for example. Review the code in the interactive panel to see examples of how to use these functions.

Javascript quickstart step 7 checkpoint

You should now be able to view user profile information.

Run your application, and verify that:

  • user information displays correctly after you have logged in.

  • user information does not display after you have logged out.

+

Now that your users can log in and log out, you will likely want to be able to retrieve the profile information associated with authenticated users. For example, you may want to be able to personalize the user interface by displaying a logged-in user’s name or profile picture.

The Auth0 SPA SDK provides user information through the getUser() function exposed by the Auth0 client. The Auth0 client also exposes an isAuthenticated() function that allows you to check whether a user is authenticated or not, which you can use to determine whether to show or hide UI elements, for example. Review the code in the interactive panel to see examples of how to use these functions.

Javascript quickstart step 7 checkpoint

You should now be able to view user profile information.

Run your application, and verify that:

  • user information displays correctly after you have logged in.

  • user information does not display after you have logged out.

-

Sorry about that. Here are a few things to double check:

  • ensure that all the previous steps work without issue

  • check your code that manages the UI in response to the authentication state

  • inspect the application logs for further errors relating to silent authentication

Still having issues? To get more help, check out our documentation or visit our community page.

+

Sorry about that. Here are a few things to double check:

  • ensure that all the previous steps work without issue

  • check your code that manages the UI in response to the authentication state

  • inspect the application logs for further errors relating to silent authentication

Still having issues? To get more help, check out our documentation or visit our community page.

diff --git a/articles/quickstart/spa/vuejs/interactive.md b/articles/quickstart/spa/vuejs/interactive.md index 8c73a299b4..79579ff02b 100644 --- a/articles/quickstart/spa/vuejs/interactive.md +++ b/articles/quickstart/spa/vuejs/interactive.md @@ -8,34 +8,34 @@ files: - files/logout - files/profile github: - path: https://github.com/auth0-samples/auth0-vue-samples/tree/master/01-Login + path: 01-Login locale: en-US --- # Add Login to Your Vue Application -

Auth0 allows you to add authentication to almost any application type. This guide demonstrates how to integrate Auth0, add authentication, and display user profile information in any Vue application using the Auth0 Vue SDK.

This quickstart is designed for using Auth0 Vue with Vue 3 applications. If you are using Vue 2, please check out the Vue 2 Tutorial with Auth0 SPA SDK instead or visit the Vue.js Authentication 2 By Example guide.

To use this quickstart, you will need:

  • A free Auth0 account or log in to Auth0.

  • A working Vue project that you want to integrate with OR you can download a sample application after logging in.

+

Auth0 allows you to add authentication to almost any application type. This guide demonstrates how to integrate Auth0, add authentication, and display user profile information in any Vue application using the Auth0 Vue SDK.

This quickstart is designed for using Auth0 Vue with Vue 3 applications. If you are using Vue 2, please check out the Vue 2 Tutorial with Auth0 SPA SDK instead or visit the Vue.js Authentication 2 By Example guide.

To use this quickstart, you will need:

  • A free Auth0 account or log in to Auth0.

  • A working Vue project that you want to integrate with OR you can download a sample application after logging in.

## Configure Auth0 -

To use Auth0 services, you’ll need to have an application set up in the Auth0 Dashboard. The Auth0 application is where you will configure how you want authentication to work for the project you are developing.

Configure an application

Use the interactive selector to create a new Auth0 application or select an existing application that represents the project you want to integrate with. Every application in Auth0 is assigned an alphanumeric, unique client ID that your application code will use to call Auth0 APIs through the SDK.

Any settings you configure using this quickstart will automatically update for your Application in the Dashboard, which is where you can manage your Applications in the future.

If you would rather explore a complete configuration, you can view a sample application instead.

Configure Callback URLs

A callback URL is a URL in your application that you would like Auth0 to redirect users to after they have authenticated. If not set, users will not be returned to your application after they log in.

If you are following along with our sample project, set this to http://localhost:3000.

Configure Logout URLs

A logout URL is a URL in your application that you would like Auth0 to redirect users to after they have logged out. If not set, users will not be able to log out from your application and will receive an error.

If you are following along with our sample project, set this to http://localhost:3000.

Configure Allowed Web Origins

An Allowed Web Origin is a URL that you want to be allowed to access to your authentication flow. This must contain the URL of your project. If not properly set, your project will be unable to silently refresh authentication tokens, so your users will be logged out the next time they visit your application or refresh a page.

If you are following along with our sample project, set this to http://localhost:3000.

+

To use Auth0 services, you’ll need to have an application set up in the Auth0 Dashboard. The Auth0 application is where you will configure how you want authentication to work for the project you are developing.

Configure an application

Use the interactive selector to create a new Auth0 application or select an existing application that represents the project you want to integrate with. Every application in Auth0 is assigned an alphanumeric, unique client ID that your application code will use to call Auth0 APIs through the SDK.

Any settings you configure using this quickstart will automatically update for your Application in the Dashboard, which is where you can manage your Applications in the future.

If you would rather explore a complete configuration, you can view a sample application instead.

Configure Callback URLs

A callback URL is a URL in your application that you would like Auth0 to redirect users to after they have authenticated. If not set, users will not be returned to your application after they log in.

If you are following along with our sample project, set this to http://localhost:3000.

Configure Logout URLs

A logout URL is a URL in your application that you would like Auth0 to redirect users to after they have logged out. If not set, users will not be able to log out from your application and will receive an error.

If you are following along with our sample project, set this to http://localhost:3000.

Configure Allowed Web Origins

An Allowed Web Origin is a URL that you want to be allowed to access to your authentication flow. This must contain the URL of your project. If not properly set, your project will be unable to silently refresh authentication tokens, so your users will be logged out the next time they visit your application or refresh a page.

If you are following along with our sample project, set this to http://localhost:3000.

## Install the Auth0 Vue SDK {{{ data-action="code" data-code="index.js" }}} -

Auth0 provides a Vue SDK to simplify the process of implementing Auth0 authentication and authorization in Vue 3 apps.

Install the Auth0 Vue SDK by running the following commands in your terminal:

cd <your-project-directory>
+

Auth0 provides a Vue SDK to simplify the process of implementing Auth0 authentication and authorization in Vue 3 apps.

Install the Auth0 Vue SDK by running the following commands in your terminal:

cd <your-project-directory>
 
 npm install @auth0/auth0-vue
 
 
-

Register the plugin

For the SDK to function, you must register the plugin with your Vue application using the following properties:

  • domain: The domain of your Auth0 tenant. This value is in the Auth0 Dashboard under your Application's Settings in the Domain field. If you are using a custom domain, set this to the value of your custom domain instead.

  • clientId: The ID of the Auth0 Application you set up earlier in this quickstart. Find this in the Auth0 Dashboard under your Application's Settings in the Client ID field.

  • authorizationParams.redirect_uri: The URL in your application that you would like Auth0 to redirect users to after they have authenticated. This corresponds to the callback URL you set up earlier in this quickstart. This value is in the Auth0 Dashboard under your Application's Settings in the Callback URLs field. Make sure what you enter in your code matches what you set up earlier or your users will see an error.

The plugin will register the SDK using both provide and app.config.globalProperties. This enables both the Composition API and Options API.

vue quickstart step 2 checkpoint

The plugin is now configured. Run your application to verify that:

  • the SDK is initializing correctly

  • your application is not throwing any errors related to Auth0

+

Register the plugin

For the SDK to function, you must register the plugin with your Vue application using the following properties:

  • domain: The domain of your Auth0 tenant. This value is in the Auth0 Dashboard under your Application's Settings in the Domain field. If you are using a custom domain, set this to the value of your custom domain instead.

  • clientId: The ID of the Auth0 Application you set up earlier in this quickstart. Find this in the Auth0 Dashboard under your Application's Settings in the Client ID field.

  • authorizationParams.redirect_uri: The URL in your application that you would like Auth0 to redirect users to after they have authenticated. This corresponds to the callback URL you set up earlier in this quickstart. This value is in the Auth0 Dashboard under your Application's Settings in the Callback URLs field. Make sure what you enter in your code matches what you set up earlier or your users will see an error.

The plugin will register the SDK using both provide and app.config.globalProperties. This enables both the Composition API and Options API.

vue quickstart step 2 checkpoint

The plugin is now configured. Run your application to verify that:

  • the SDK is initializing correctly

  • your application is not throwing any errors related to Auth0

-

If your application did not start successfully:

  • Verify you selected the correct application

  • Save your changes after entering your URLs

  • Verify the domain and Client ID imported correctly

Still having issues? Check out our documentation or visit our community page to get more help.

+

If your application did not start successfully:

  • Verify you selected the correct application

  • Save your changes after entering your URLs

  • Verify the domain and Client ID imported correctly

Still having issues? Check out our documentation or visit our community page to get more help.

@@ -46,14 +46,14 @@ npm install @auth0/auth0-vue
-

If you were not able to log in using Auth0 Universal Login:

  • Verify you configured the correct authorizationParams.redirect_uri

  • Verify the domain and Client ID are set correctly

Still having issues? Check out our documentation or visit our community page to get more help.

+

If you were not able to log in using Auth0 Universal Login:

  • Verify you configured the correct authorizationParams.redirect_uri

  • Verify the domain and Client ID are set correctly

Still having issues? Check out our documentation or visit our community page to get more help.

## Add logout to your application {{{ data-action="code" data-code="logout.js" }}} -

Users who log in to your project will also need a way to log out. When users log out, your application will redirect them to your Auth0 logout endpoint, which will then redirect them to the specified logoutParams.returnTo parameter.

Use the logout function exposed on the return value of useAuth0, which you can access in your component's setup function, to log the user out of your application.

Using the Options API

With the Options API, you can use the same logout method from the global $auth0 property through the this accessor.

vue quickstart step 4 checkpoint

Run your application and click the logout button, verify that:

  • your Vue application redirects you to the logoutParams.returnTo address

  • you are no longer logged in to your application

+

Users who log in to your project will also need a way to log out. When users log out, your application will redirect them to your Auth0 logout endpoint, which will then redirect them to the specified logoutParams.returnTo parameter.

Use the logout function exposed on the return value of useAuth0, which you can access in your component's setup function, to log the user out of your application.

Using the Options API

With the Options API, you can use the same logout method from the global $auth0 property through the this accessor.

vue quickstart step 4 checkpoint

Run your application and click the logout button, verify that:

  • your Vue application redirects you to the logoutParams.returnTo address

  • you are no longer logged in to your application

@@ -64,10 +64,10 @@ npm install @auth0/auth0-vue ## Show user profile information {{{ data-action="code" data-code="profile.js" }}} -

Next, you will configure how to retrieve the profile information associated with authenticated users. For example, you may want to be able to display a logged-in user’s name or profile picture in your project. Once the user authenticates, the SDK extracts the user's profile information and stores it in memory. The application can access the user profile with the reactive user property. To access this property, review your component's setup function and find the userAuth0 return value.

The user property contains sensitive information related to the user's identity. It is only available based on the user's authentication status. To prevent render errors, you should always:

  • use the isAuthenticated property to determine whether Auth0 has authenticated the user before Vue renders any component that consumes the user property.

  • ensure that the SDK has finished loading by checking that isLoading is false before accessing the isAuthenticated property.

Using the Options API

For the Options API, use the same reactive user, isLoading, and isAuthenticated properties from the global $auth0 property through the this accessor.

vue step 5 checkpoint

Verify that:

  • you can display the user or any of the user properties within a component correctly after you have logged in

+

Next, you will configure how to retrieve the profile information associated with authenticated users. For example, you may want to be able to display a logged-in user’s name or profile picture in your project. Once the user authenticates, the SDK extracts the user's profile information and stores it in memory. The application can access the user profile with the reactive user property. To access this property, review your component's setup function and find the userAuth0 return value.

The user property contains sensitive information related to the user's identity. It is only available based on the user's authentication status. To prevent render errors, you should always:

  • use the isAuthenticated property to determine whether Auth0 has authenticated the user before Vue renders any component that consumes the user property.

  • ensure that the SDK has finished loading by checking that isLoading is false before accessing the isAuthenticated property.

Using the Options API

For the Options API, use the same reactive user, isLoading, and isAuthenticated properties from the global $auth0 property through the this accessor.

vue step 5 checkpoint

Verify that:

  • you can display the user or any of the user properties within a component correctly after you have logged in

-

If you are having issues with the user properties:

  • Verify you added the isLoading check before accessing the isAuthenticated property

  • Verify you added the isAuthenticated check before accessing the user property

Still having issues? Check out our documentation or visit our community page to get more help.

+

If you are having issues with the user properties:

  • Verify you added the isLoading check before accessing the isAuthenticated property

  • Verify you added the isAuthenticated check before accessing the user property

Still having issues? Check out our documentation or visit our community page to get more help.

diff --git a/articles/quickstart/webapp/apache/interactive.md b/articles/quickstart/webapp/apache/interactive.md index 94d3234ae5..7fa4dd02c3 100644 --- a/articles/quickstart/webapp/apache/interactive.md +++ b/articles/quickstart/webapp/apache/interactive.md @@ -4,8 +4,6 @@ description: This tutorial demonstrates how to configure Apache to add authentic interactive: true files: - files/auth_openidc -github: - path: https://github.com/zmartzone/mod_auth_openidc/releases locale: en-US --- @@ -17,7 +15,7 @@ locale: en-US ## Install and Enable mod_auth_openidc Module -

First, install the mod_auth_openidc module for Apache.

You can get the binaries from GitHub and install them for your OS. If your OS isn't compatible with any of the binaries, you can still build it from source.

Once you've installed the module, enable it for Apache with the a2enmod command. To learn more, read a2enmod on Ubuntu Manpage:

a2enmod auth_openidc

For Windows, you can use this Powershell script to get a2enmod working on your system.

+

First, install the mod_auth_openidc module for Apache.

You can get the binaries from GitHub and install them for your OS. If your OS isn't compatible with any of the binaries, you can still build it from source.

Once you've installed the module, enable it for Apache with the a2enmod command. To learn more, read a2enmod on Ubuntu Manpage:

a2enmod auth_openidc

For Windows, you can use this Powershell script to get a2enmod working on your system.

## Configure the Module with Your Auth0 Account Information {{{ data-action="code" data-code="auth_openidc.conf#1:12" }}} diff --git a/articles/quickstart/webapp/aspnet-core-blazor-server/interactive.md b/articles/quickstart/webapp/aspnet-core-blazor-server/interactive.md index 98f0a6eff8..cd6cb2111d 100644 --- a/articles/quickstart/webapp/aspnet-core-blazor-server/interactive.md +++ b/articles/quickstart/webapp/aspnet-core-blazor-server/interactive.md @@ -8,7 +8,7 @@ files: - files/Profile - files/Program github: - path: https://github.com/auth0-samples/auth0-aspnetcore-blazor-server-samples/tree/main/Quickstart/Sample + path: Quickstart/Sample locale: en-US --- @@ -20,12 +20,12 @@ locale: en-US ## Configure Auth0 -

To use Auth0 services, you’ll need to have an application set up in the Auth0 Dashboard. The Auth0 application is where you will configure how you want authentication to work for the project you are developing.

Configure an application

Use the interactive selector to create a new Auth0 application or select an existing application that represents the project you want to integrate with. Every application in Auth0 is assigned an alphanumeric, unique client ID that your application code will use to call Auth0 APIs through the SDK.

Any settings you configure using this quickstart will automatically update for your Application in the Dashboard, which is where you can manage your Applications in the future.

If you would rather explore a complete configuration, you can view a sample application instead.

Configure Callback URLs

A callback URL is a URL in your application that you would like Auth0 to redirect users to after they have authenticated. If not set, users will not be returned to your application after they log in.

If you are following along with our sample project, set this to http://localhost:3000/.

Configure Logout URLs

A logout URL is a URL in your application that you would like Auth0 to redirect users to after they have logged out. If not set, users will not be able to log out from your application and will receive an error.

If you are following along with our sample project, set this to http://localhost:3000.

+

To use Auth0 services, you’ll need to have an application set up in the Auth0 Dashboard. The Auth0 application is where you will configure how you want authentication to work for the project you are developing.

Configure an application

Use the interactive selector to create a new Auth0 application or select an existing application that represents the project you want to integrate with. Every application in Auth0 is assigned an alphanumeric, unique client ID that your application code will use to call Auth0 APIs through the SDK.

Any settings you configure using this quickstart will automatically update for your Application in the Dashboard, which is where you can manage your Applications in the future.

If you would rather explore a complete configuration, you can view a sample application instead.

Configure Callback URLs

A callback URL is a URL in your application that you would like Auth0 to redirect users to after they have authenticated. If not set, users will not be returned to your application after they log in.

If you are following along with our sample project, set this to http://localhost:3000/callback.

Configure Logout URLs

A logout URL is a URL in your application that you would like Auth0 to redirect users to after they have logged out. If not set, users will not be able to log out from your application and will receive an error.

If you are following along with our sample project, set this to http://localhost:3000.

## Install and Configure the SDK {{{ data-action="code" data-code="Program.cs" }}} -

Install from Nuget

To integrate Auth0 with Blazor Server you can use our SDK by installing the Auth0.AspNetCore.Authentication Nuget package to your application.

Configure the middleware

To enable authentication in your Blazor Server application, use the middleware provided by the SDK. Go to the Program.cs file and call builder.Services.AddAuth0WebAppAuthentication() to register the SDK's middleware.

Ensure to configure the Domain and ClientId, these are required fields to ensure the SDK knows which Auth0 tenant and application it should use.

Make sure you have enabled authentication and authorization in your Program.cs file.

+

Install from Nuget

To integrate Auth0 with Blazor Server you can use our SDK by installing the Auth0.AspNetCore.Authentication Nuget package to your application.

Configure the middleware

To enable authentication in your Blazor Server application, use the middleware provided by the SDK. Go to the Program.cs file and call builder.Services.AddAuth0WebAppAuthentication() to register the SDK's middleware.

Ensure to configure the Domain and ClientId, these are required fields to ensure the SDK knows which Auth0 tenant and application it should use.

Make sure you have enabled authentication and authorization in your Program.cs file.

## Login {{{ data-action="code" data-code="Login.cshtml.cs" }}} @@ -34,7 +34,7 @@ locale: en-US
-

Sorry about that. Here's a couple things to double check:

  • make sure the correct application is selected

  • did you save after entering your URLs?

  • make sure the domain and client ID are configured correctly

Still having issues? Check out our documentation or visit our community page to get more help.

+

Sorry about that. Here's a couple things to double check:

  • make sure the correct application is selected

  • did you save after entering your URLs?

  • make sure the domain and client ID are configured correctly

Still having issues? Check out our documentation or visit our community page to get more help.

@@ -45,7 +45,7 @@ locale: en-US
-

Sorry about that. Here's a couple things to double check:

  • make sure the correct application is selected

  • did you save after entering your URLs?

  • make sure the domain and client ID are configured correctly

Still having issues? Check out our documentation or visit our community page to get more help.

+

Sorry about that. Here's a couple things to double check:

  • make sure the correct application is selected

  • did you save after entering your URLs?

  • make sure the domain and client ID are configured correctly

Still having issues? Check out our documentation or visit our community page to get more help.

@@ -56,6 +56,6 @@ locale: en-US
-

Sorry about that. Here's a couple things to double check:

  • make sure the correct application is selected

  • did you save after entering your URLs?

  • make sure the domain and client ID are configured correctly

Still having issues? Check out our documentation or visit our community page to get more help.

+

Sorry about that. Here's a couple things to double check:

  • make sure the correct application is selected

  • did you save after entering your URLs?

  • make sure the domain and client ID are configured correctly

Still having issues? Check out our documentation or visit our community page to get more help.

diff --git a/articles/quickstart/webapp/aspnet-core/interactive.md b/articles/quickstart/webapp/aspnet-core/interactive.md index 7230ff03f6..616cd153d6 100644 --- a/articles/quickstart/webapp/aspnet-core/interactive.md +++ b/articles/quickstart/webapp/aspnet-core/interactive.md @@ -7,7 +7,7 @@ files: - files/appsettings - files/AccountController github: - path: https://github.com/auth0-samples/auth0-aspnetcore-mvc-samples/tree/master/Quickstart/Sample + path: Quickstart/Sample locale: en-US --- @@ -19,12 +19,12 @@ locale: en-US ## Configure Auth0 -

To use Auth0 services, you’ll need to have an application set up in the Auth0 Dashboard. The Auth0 application is where you will configure how you want authentication to work for the project you are developing.

Configure an application

Use the interactive selector to create a new Auth0 application or select an existing application that represents the project you want to integrate with. Every application in Auth0 is assigned an alphanumeric, unique client ID that your application code will use to call Auth0 APIs through the SDK.

Any settings you configure using this quickstart will automatically update for your Application in the Dashboard, which is where you can manage your Applications in the future.

If you would rather explore a complete configuration, you can view a sample application instead.

Configure Callback URLs

A callback URL is a URL in your application that you would like Auth0 to redirect users to after they have authenticated. If not set, users will not be returned to your application after they log in.

If you are following along with our sample project, set this to http://localhost:3000/callback.

Configure Logout URLs

A logout URL is a URL in your application that you would like Auth0 to redirect users to after they have logged out. If not set, users will not be able to log out from your application and will receive an error.

If you are following along with our sample project, set this to http://localhost:3000.

+

To use Auth0 services, you’ll need to have an application set up in the Auth0 Dashboard. The Auth0 application is where you will configure how you want authentication to work for the project you are developing.

Configure an application

Use the interactive selector to create a new Auth0 application or select an existing application that represents the project you want to integrate with. Every application in Auth0 is assigned an alphanumeric, unique client ID that your application code will use to call Auth0 APIs through the SDK.

Any settings you configure using this quickstart will automatically update for your Application in the Dashboard, which is where you can manage your Applications in the future.

If you would rather explore a complete configuration, you can view a sample application instead.

Configure Callback URLs

A callback URL is a URL in your application that you would like Auth0 to redirect users to after they have authenticated. If not set, users will not be returned to your application after they log in.

If you are following along with our sample project, set this to http://localhost:3000/callback.

Configure Logout URLs

A logout URL is a URL in your application that you would like Auth0 to redirect users to after they have logged out. If not set, users will not be able to log out from your application and will receive an error.

If you are following along with our sample project, set this to http://localhost:3000.

## Install and Configure the SDK {{{ data-action="code" data-code="Program.cs" }}} -

Install from Nuget

To integrate Auth0 with ASP.NET Core you can use our SDK by installing the Auth0.AspNetCore.Authentication Nuget package to your application.

Configure the middleware

To enable authentication in your ASP.NET Core application, use the middleware provided by the SDK. Go to the Program.cs file and call builder.Services.AddAuth0WebAppAuthentication() to register the SDK's middleware.

Ensure to configure the Domain and ClientId, these are required fields to ensure the SDK knows which Auth0 tenant and application it should use.

Make sure you have enabled authentication and authorization in your Program.cs file.

+

Install from Nuget

To integrate Auth0 with ASP.NET Core you can use our SDK by installing the Auth0.AspNetCore.Authentication Nuget package to your application.

Configure the middleware

To enable authentication in your ASP.NET Core application, use the middleware provided by the SDK. Go to the Program.cs file and call builder.Services.AddAuth0WebAppAuthentication() to register the SDK's middleware.

Ensure to configure the Domain and ClientId, these are required fields to ensure the SDK knows which Auth0 tenant and application it should use.

Make sure you have enabled authentication and authorization in your Program.cs file.

## Login {{{ data-action="code" data-code="AccountController.cs" }}} @@ -33,7 +33,7 @@ locale: en-US
-

Sorry about that. Here's a couple things to double check:

  • make sure the correct application is selected

  • did you save after entering your URLs?

  • make sure the domain and client ID are configured correctly

Still having issues? Check out our documentation or visit our community page to get more help.

+

Sorry about that. Here's a couple things to double check:

  • make sure the correct application is selected

  • did you save after entering your URLs?

  • make sure the domain and client ID are configured correctly

Still having issues? Check out our documentation or visit our community page to get more help.

@@ -44,7 +44,7 @@ locale: en-US
-

Sorry about that. Here's a couple things to double check:

  • make sure the correct application is selected

  • did you save after entering your URLs?

  • make sure the domain and client ID are configured correctly

Still having issues? Check out our documentation or visit our community page to get more help.

+

Sorry about that. Here's a couple things to double check:

  • make sure the correct application is selected

  • did you save after entering your URLs?

  • make sure the domain and client ID are configured correctly

Still having issues? Check out our documentation or visit our community page to get more help.

@@ -55,6 +55,6 @@ locale: en-US
-

Sorry about that. Here's a couple things to double check:

  • make sure the correct application is selected

  • did you save after entering your URLs?

  • make sure the domain and client ID are configured correctly

Still having issues? Check out our documentation or visit our community page to get more help.

+

Sorry about that. Here's a couple things to double check:

  • make sure the correct application is selected

  • did you save after entering your URLs?

  • make sure the domain and client ID are configured correctly

Still having issues? Check out our documentation or visit our community page to get more help.

diff --git a/articles/quickstart/webapp/aspnet-owin/interactive.md b/articles/quickstart/webapp/aspnet-owin/interactive.md index ebd984644a..c1a61a7c79 100644 --- a/articles/quickstart/webapp/aspnet-owin/interactive.md +++ b/articles/quickstart/webapp/aspnet-owin/interactive.md @@ -7,7 +7,7 @@ files: - files/Startup - files/AccountController github: - path: https://github.com/auth0-samples/auth0-aspnet-owin-mvc-samples/tree/master/Quickstart/Sample + path: Quickstart/Sample locale: en-US --- @@ -19,7 +19,7 @@ locale: en-US ## Configure Auth0 -

To use Auth0 services, you’ll need to have an application set up in the Auth0 Dashboard. The Auth0 application is where you will configure how you want authentication to work for the project you are developing.

Configure an application

Use the interactive selector to create a new Auth0 application or select an existing application that represents the project you want to integrate with. Every application in Auth0 is assigned an alphanumeric, unique client ID that your application code will use to call Auth0 APIs through the SDK.

Any settings you configure using this quickstart will automatically update for your Application in the Dashboard, which is where you can manage your Applications in the future.

If you would rather explore a complete configuration, you can view a sample application instead.

Configure Callback URLs

A callback URL is a URL in your application that you would like Auth0 to redirect users to after they have authenticated. If not set, users will not be returned to your application after they log in.

If you are following along with our sample project, set this to http://localhost:3000/.

Configure Logout URLs

A logout URL is a URL in your application that you would like Auth0 to redirect users to after they have logged out. If not set, users will not be able to log out from your application and will receive an error.

If you are following along with our sample project, set this to http://localhost:3000.

+

To use Auth0 services, you’ll need to have an application set up in the Auth0 Dashboard. The Auth0 application is where you will configure how you want authentication to work for the project you are developing.

Configure an application

Use the interactive selector to create a new Auth0 application or select an existing application that represents the project you want to integrate with. Every application in Auth0 is assigned an alphanumeric, unique client ID that your application code will use to call Auth0 APIs through the SDK.

Any settings you configure using this quickstart will automatically update for your Application in the Dashboard, which is where you can manage your Applications in the future.

If you would rather explore a complete configuration, you can view a sample application instead.

Configure Callback URLs

A callback URL is a URL in your application that you would like Auth0 to redirect users to after they have authenticated. If not set, users will not be returned to your application after they log in.

If you are following along with our sample project, set this to http://localhost:3000/callback.

Configure Logout URLs

A logout URL is a URL in your application that you would like Auth0 to redirect users to after they have logged out. If not set, users will not be able to log out from your application and will receive an error.

If you are following along with our sample project, set this to http://localhost:3000.

## Configure the project {{{ data-action="code" data-code="Web.config" }}} @@ -30,7 +30,7 @@ Install-Package Microsoft.Owin.Security.Cookies
-

Issues occur when configuring the OWIN cookie middleware and System.Web cookies at the same time. To learn more, read System.Web cookie integration issues doc to mitigate these problems.

Configure the credentials

For the SDK to function properly, set the following properties in Web.config:

  • auth0:Domain: The domain of your Auth0 tenant. You can find this in the Auth0 Dashboard under your application's Settings in the Domain field. If you are using a custom domain, set this to the value of your custom domain instead.

  • auth0:ClientId: The ID of the Auth0 application you created in Auth0 Dashboard. You can find this in the Auth0 Dashboard under your application's Settings in the Client ID field.

+

Issues occur when configuring the OWIN cookie middleware and System.Web cookies at the same time. To learn more, read System.Web cookie integration issues doc to mitigate these problems.

Configure the credentials

For the SDK to function properly, set the following properties in Web.config:

  • auth0:Domain: The domain of your Auth0 tenant. You can find this in the Auth0 Dashboard under your application's Settings in the Domain field. If you are using a custom domain, set this to the value of your custom domain instead.

  • auth0:ClientId: The ID of the Auth0 application you created in Auth0 Dashboard. You can find this in the Auth0 Dashboard under your application's Settings in the Client ID field.

## Configure the middleware {{{ data-action="code" data-code="Startup.cs#18:74" }}} @@ -44,7 +44,7 @@ Install-Package Microsoft.Owin.Security.Cookies
-

Sorry about that. Here are a couple of things to double-check:

  • make sure the correct application is selected

  • did you save after entering your URLs?

  • make sure the domain and client ID are configured correctly

Still having issues? Check out our documentation or visit our community page to get more help.

+

Sorry about that. Here are a couple of things to double-check:

  • make sure the correct application is selected

  • did you save after entering your URLs?

  • make sure the domain and client ID are configured correctly

Still having issues? Check out our documentation or visit our community page to get more help.

@@ -55,7 +55,7 @@ Install-Package Microsoft.Owin.Security.Cookies
-

Sorry about that. Here are a couple of things to double-check:

  • make sure the correct application is selected

  • did you save after entering your URLs?

  • make sure the domain and client ID are configured correctly

Still having issues? Check out our documentation or visit our community page to get more help.

+

Sorry about that. Here are a couple of things to double-check:

  • make sure the correct application is selected

  • did you save after entering your URLs?

  • make sure the domain and client ID are configured correctly

Still having issues? Check out our documentation or visit our community page to get more help.

@@ -66,6 +66,6 @@ Install-Package Microsoft.Owin.Security.Cookies
-

Sorry about that. Here are a couple things to double-check:

  • make sure the correct application is selected

  • make sure the domain and client ID are configured correctly

  • Did you set openid profile email as the scope?

Still having issues? Check out our documentation or visit our community page to get more help.

+

Sorry about that. Here are a couple things to double-check:

  • make sure the correct application is selected

  • make sure the domain and client ID are configured correctly

  • Did you set openid profile email as the scope?

Still having issues? Check out our documentation or visit our community page to get more help.

diff --git a/articles/quickstart/webapp/django/interactive.md b/articles/quickstart/webapp/django/interactive.md index 3f1adde192..e49db760a7 100644 --- a/articles/quickstart/webapp/django/interactive.md +++ b/articles/quickstart/webapp/django/interactive.md @@ -8,19 +8,19 @@ files: - files/webappexample/urls - files/webappexample/views github: - path: https://github.com/auth0-samples/auth0-django-web-app/tree/master/01-Login + path: 01-Login locale: en-US --- # Add Login to your Django Application -

Auth0 allows you to add authentication and gain access to user profile information in your application. This guide demonstrates how to integrate Auth0 with a Python Django application using the Authlib SDK.

+

Auth0 allows you to add authentication and gain access to user profile information in your application. This guide demonstrates how to integrate Auth0 with a Python Django application using the Authlib SDK.

## Configure Auth0 -

To use Auth0 services, you’ll need to have an application set up in the Auth0 Dashboard. The Auth0 application is where you will configure how you want authentication to work for the project you are developing.

Configure an application

Use the interactive selector to create a new Auth0 application or select an existing application that represents the project you want to integrate with. Every application in Auth0 is assigned an alphanumeric, unique client ID that your application code will use to call Auth0 APIs through the SDK.

Any settings you configure using this quickstart will automatically update for your Application in the Dashboard, which is where you can manage your Applications in the future.

If you would rather explore a complete configuration, you can view a sample application instead.

Configure Callback URLs

A callback URL is a URL in your application that you would like Auth0 to redirect users to after they have authenticated. If not set, users will not be returned to your application after they log in.

If you are following along with our sample project, set this to http://localhost:3000/.

Configure Logout URLs

A logout URL is a URL in your application that you would like Auth0 to redirect users to after they have logged out. If not set, users will not be able to log out from your application and will receive an error.

If you are following along with our sample project, set this to http://localhost:3000.

+

To use Auth0 services, you’ll need to have an application set up in the Auth0 Dashboard. The Auth0 application is where you will configure how you want authentication to work for the project you are developing.

Configure an application

Use the interactive selector to create a new Auth0 application or select an existing application that represents the project you want to integrate with. Every application in Auth0 is assigned an alphanumeric, unique client ID that your application code will use to call Auth0 APIs through the SDK.

Any settings you configure using this quickstart will automatically update for your Application in the Dashboard, which is where you can manage your Applications in the future.

If you would rather explore a complete configuration, you can view a sample application instead.

Configure Callback URLs

A callback URL is a URL in your application that you would like Auth0 to redirect users to after they have authenticated. If not set, users will not be returned to your application after they log in.

If you are following along with our sample project, set this to http://localhost:3000/callback.

Configure Logout URLs

A logout URL is a URL in your application that you would like Auth0 to redirect users to after they have logged out. If not set, users will not be able to log out from your application and will receive an error.

If you are following along with our sample project, set this to http://localhost:3000.

## Install dependencies @@ -63,7 +63,7 @@ AUTH0_DOMAIN=${account.namespace} ## Setup your application {{{ data-action="code" data-code="webappexample/views.py#1:18" }}} -

To begin creating your application, open the webappexample/views.py file in your IDE.

Import all the libraries your application needs.

Now you can configure Authlib to handle your application's authentication with Auth0.

Learn more about the configuration options available for Authlib's OAuth register() method from their documentation.

+

To begin creating your application, open the webappexample/views.py file in your IDE.

Import all the libraries your application needs.

Now you can configure Authlib to handle your application's authentication with Auth0.

Learn more about the configuration options available for Authlib's OAuth register() method from their documentation.

## Setup your route handlers {{{ data-action="code" data-code="webappexample/views.py#20:52" }}} @@ -89,10 +89,10 @@ python3 manage.py runserver 3000
-

Your application should now be ready to open from your browser at http://localhost:3000.

Django - Step 10 - Run your application - Checkpoint

Visit http://localhost:3000 to verify. You should find a login button routing to Auth0 for login, then back to your application to see your profile information.

+

Your application should now be ready to open from your browser at http://localhost:3000.

Django - Step 10 - Run your application - Checkpoint

Visit http://localhost:3000 to verify. You should find a login button routing to Auth0 for login, then back to your application to see your profile information.

-

If your application did not start successfully:

  • Verify any errors in the console.

  • Verify the domain and Client ID imported correctly.

  • Verify your tenant configuration.

Still having issues? Check out our documentation or visit our community page to get more help.

+

If your application did not start successfully:

  • Verify any errors in the console.

  • Verify the domain and Client ID imported correctly.

  • Verify your tenant configuration.

Still having issues? Check out our documentation or visit our community page to get more help.

diff --git a/articles/quickstart/webapp/express/interactive.md b/articles/quickstart/webapp/express/interactive.md index 9bb9f18b72..5af2d2416d 100644 --- a/articles/quickstart/webapp/express/interactive.md +++ b/articles/quickstart/webapp/express/interactive.md @@ -5,7 +5,7 @@ interactive: true files: - files/server github: - path: https://github.com/auth0-samples/auth0-express-webapp-sample/tree/master/01-Login + path: 01-Login locale: en-US --- @@ -17,50 +17,32 @@ locale: en-US ## Configure Auth0 -

To use Auth0 services, you’ll need to have an application set up in the Auth0 Dashboard. The Auth0 application is where you will configure how you want authentication to work for the project you are developing.

Configure an application

Use the interactive selector to create a new Auth0 application or select an existing application that represents the project you want to integrate with. Every application in Auth0 is assigned an alphanumeric, unique client ID that your application code will use to call Auth0 APIs through the SDK.

Any settings you configure using this quickstart will automatically update for your Application in the Dashboard, which is where you can manage your Applications in the future.

If you would rather explore a complete configuration, you can view a sample application instead.

Configure Callback URLs

A callback URL is a URL in your application that you would like Auth0 to redirect users to after they have authenticated. If not set, users will not be returned to your application after they log in.

If you are following along with our sample project, set this to http://localhost:3000/.

Configure Logout URLs

A logout URL is a URL in your application that you would like Auth0 to redirect users to after they have logged out. If not set, users will not be able to log out from your application and will receive an error.

If you are following along with our sample project, set this to http://localhost:3000/.

+

To use Auth0 services, you’ll need to have an application set up in the Auth0 Dashboard. The Auth0 application is where you will configure how you want authentication to work for the project you are developing.

Configure an application

Use the interactive selector to create a new Auth0 application or select an existing application that represents the project you want to integrate with. Every application in Auth0 is assigned an alphanumeric, unique client ID that your application code will use to call Auth0 APIs through the SDK.

Any settings you configure using this quickstart will automatically update for your Application in the Dashboard, which is where you can manage your Applications in the future.

If you would rather explore a complete configuration, you can view a sample application instead.

Configure Callback URLs

A callback URL is a URL in your application that you would like Auth0 to redirect users to after they have authenticated. If not set, users will not be returned to your application after they log in.

If you are following along with our sample project, set this to http://localhost:3000/callback.

Configure Logout URLs

A logout URL is a URL in your application that you would like Auth0 to redirect users to after they have logged out. If not set, users will not be able to log out from your application and will receive an error.

If you are following along with our sample project, set this to http://localhost:3000/.

## Install the Express OpenID Connect SDK {{{ data-action="code" data-code="server.js#2:16" }}} -

Your application will need the express-openid-connect package which is an Auth0-maintained OIDC-compliant SDK for Express.

Install the Express OpenID Connect SDK by running the following commands in your terminal:

cd <your-project-directory>
+

Your application will need the express-openid-connect package which is an Auth0-maintained OIDC-compliant SDK for Express.

Install the Express OpenID Connect SDK by running the following commands in your terminal:

cd <your-project-directory>
 
 npm install express-openid-connect
-```
 
-### Configure Router
-The Express OpenID Connect library provides the `auth` router in order to attach authentication routes to your application. You will need to configure the router with the following configuration keys:
+
-- `authRequired` - Controls whether authentication is required for all routes -- `auth0Logout` - Uses Auth0 logout feature -- `baseURL` - The URL where the application is served -- `secret` - A long, random string -- `issuerBaseURL` - The Domain as a secure URL found in your Application settings -- `clientID` - The Client ID found in your Application settings +

Configure Router

The Express OpenID Connect library provides the auth router in order to attach authentication routes to your application. You will need to configure the router with the following configuration keys:

  • authRequired - Controls whether authentication is required for all routes.

  • auth0Logout - Uses Auth0 logout feature.

  • baseURL - The URL where the application is served.

  • secret - A long, random string.

  • issuerBaseURL - The Domain as a secure URL found in your Application settings.

  • clientID - The Client ID found in your Application settings.

For additional configuration options visit the API documentation.

You can generate a suitable string for LONG_RANDOM_STRING using openssl rand -hex 32 on the command line.

Express - Step 2 - Install the Express OpenID Connect SDK - Checkpoint

A user can now log into your application by visiting the /login route provided by the library. If you are running your project on localhost:3000, that link would be http://localhost:3000/login.

-For additional configuration options visit the API documentation. - -:::note -You can generate a suitable string for `LONG_RANDOM_STRING` using `openssl rand -hex 32` on the command line. -::: +
-::::checkpoint -:::checkpoint-default -A user can now log into your application by visiting the `/login` route provided by the library. If you are running your project on `localhost:3000` that link would be `http://localhost:3000/`. -::: -:::checkpoint-failure -Sorry about that. You should check the error details on the Auth0 login page to make sure you have entered the callback URL correctly. +

Sorry about that. You should check the error details on the Auth0 login page to make sure you have entered the callback URL correctly.

Still having issues? Check out our documentation or visit our community page to get more help.

-Still having issues? Check out our documentation or visit our community page to get more help. -::: -:::: +

## Display User Profile {{{ data-action="code" data-code="server.js#25:28" }}} -

To display the user's profile, your application should provide a protected route.

Add the requiresAuth middleware for routes that require authentication. Any route using this middleware will check for a valid user session and, if one does not exist, it will redirect the user to log in.

Express - Step 3 - Display User Profile - Checkpoint

A user can log out of your application by visiting the /logout route provided by the library. If you are running your project on localhost:3000, that link would be http://localhost:3000/logout.

+

To display the user's profile, your application should provide a protected route.

Add the requiresAuth middleware for routes that require authentication. Any route using this middleware will check for a valid user session and, if one does not exist, it will redirect the user to log in.

Express - Step 3 - Display User Profile - Checkpoint

A user can log out of your application by visiting the /logout route provided by the library. If you are running your project on localhost:3000, that link would be http://localhost:3000/logout.

-

Sorry about that. You should check that you configured the logout URL correctly.

Still having issues? Check out our documentation or visit our community page to get more help.

+

Sorry about that. You should check that you configured the logout URL correctly.

Still having issues? Check out our documentation or visit our community page to get more help.

diff --git a/articles/quickstart/webapp/golang/interactive.md b/articles/quickstart/webapp/golang/interactive.md index a621fc3149..51c1a8b663 100644 --- a/articles/quickstart/webapp/golang/interactive.md +++ b/articles/quickstart/webapp/golang/interactive.md @@ -14,7 +14,7 @@ files: - files/router - files/user github: - path: https://github.com/auth0-samples/auth0-golang-web-app/tree/master/01-Login + path: 01-Login locale: en-US --- @@ -26,12 +26,12 @@ locale: en-US ## Configure Auth0 -

To use Auth0 services, you’ll need to have an application set up in the Auth0 Dashboard. The Auth0 application is where you will configure how you want authentication to work for the project you are developing.

Configure an application

Use the interactive selector to create a new Auth0 application or select an existing application that represents the project you want to integrate with. Every application in Auth0 is assigned an alphanumeric, unique client ID that your application code will use to call Auth0 APIs through the SDK.

Any settings you configure using this quickstart will automatically update for your Application in the Dashboard, which is where you can manage your Applications in the future.

If you would rather explore a complete configuration, you can view a sample application instead.

Configure Callback URLs

A callback URL is a URL in your application that you would like Auth0 to redirect users to after they have authenticated. If not set, users will not be returned to your application after they log in.

If you are following along with our sample project, set this to http://localhost:3000/.

Configure Logout URLs

A logout URL is a URL in your application that you would like Auth0 to redirect users to after they have logged out. If not set, users will not be able to log out from your application and will receive an error.

If you are following along with our sample project, set this to http://localhost:3000.

+

To use Auth0 services, you’ll need to have an application set up in the Auth0 Dashboard. The Auth0 application is where you will configure how you want authentication to work for the project you are developing.

Configure an application

Use the interactive selector to create a new Auth0 application or select an existing application that represents the project you want to integrate with. Every application in Auth0 is assigned an alphanumeric, unique client ID that your application code will use to call Auth0 APIs through the SDK.

Any settings you configure using this quickstart will automatically update for your Application in the Dashboard, which is where you can manage your Applications in the future.

If you would rather explore a complete configuration, you can view a sample application instead.

Configure Callback URLs

A callback URL is a URL in your application that you would like Auth0 to redirect users to after they have authenticated. If not set, users will not be returned to your application after they log in.

If you are following along with our sample project, set this to http://localhost:3000/callback.

Configure Logout URLs

A logout URL is a URL in your application that you would like Auth0 to redirect users to after they have logged out. If not set, users will not be able to log out from your application and will receive an error.

If you are following along with our sample project, set this to http://localhost:3000.

## Install dependencies {{{ data-action="code" data-code="go.mod" }}} -

Create a go.mod file to list all the dependencies in your application.

To integrate Auth0 in a Go application, add the coreos/go-oidc/v3 and x/oauth2 packages.

In addition to the OIDC and OAuth2 packages, add joho/godotenv, gin-gonic/gin, and gin-contrib/sessions.

This example uses gin for routing, but you can use whichever router you want.

Save the go.mod file with the necessary dependencies and install them using the following command in your terminal:

go mod download
+

Create a go.mod file to list all the dependencies in your application.

To integrate Auth0 in a Go application, add the coreos/go-oidc/v3 and x/oauth2 packages.

In addition to the OIDC and OAuth2 packages, add joho/godotenv, gin-gonic/gin, and gin-contrib/sessions.

This example uses gin for routing, but you can use whichever router you want.

Save the go.mod file with the necessary dependencies and install them using the following command in your terminal:

go mod download
 
 
@@ -45,12 +45,12 @@ locale: en-US ## Configure OAuth2 and OpenID Connect packages {{{ data-action="code" data-code="auth.go" }}} -

Next, configure the OAuth2 and OpenID Connect packages.

Create a file called auth.go in the platform/authenticator folder. In this package, create a method to configure and return OAuth2 and OIDC clients, and another one to verify an ID Token.

+

Next, configure the OAuth2 and OpenID Connect packages.

Create a file called auth.go in the platform/authenticator folder. In this package, create a method to configure and return OAuth2 and OIDC clients, and another one to verify an ID Token.

## Set up your application routes {{{ data-action="code" data-code="router.go" }}} -

Create a file called router.go in the platform/router folder. In this package, create a method to configure and return our routes using github.com/gin-gonic/gin. You will be passing an instance of Authenticator to the method, for use with the login and callback handlers.

+

Create a file called router.go in the platform/router folder. In this package, create a method to configure and return our routes using github.com/gin-gonic/gin. You will be passing an instance of Authenticator to the method, for use with the login and callback handlers.

## Add login to your application {{{ data-action="code" data-code="login.go" }}} @@ -70,7 +70,7 @@ locale: en-US ## Add logout to your application {{{ data-action="code" data-code="logout.go" }}} -

To log the user out, clear the data from the session and redirect the user to the Auth0 logout endpoint. You can find more information about this in the logout documentation.

Create a file called logout.go in the folder web/app/logout, and add the function Handler to redirect the user to Auth0's logout endpoint.

The returnTo URL needs to be in the list of Allowed Logout URLs in the settings section of the application, For more information, see Redirect Users After Logout.

Create a file called user.js in the folder web/static/js, and add the code to remove the cookie from a logged-in user.

+

To log the user out, clear the data from the session and redirect the user to the Auth0 logout endpoint. You can find more information about this in the logout documentation.

Create a file called logout.go in the folder web/app/logout, and add the function Handler to redirect the user to Auth0's logout endpoint.

The returnTo URL needs to be in the list of Allowed Logout URLs in the settings section of the application, For more information, see Redirect Users After Logout.

Create a file called user.js in the folder web/static/js, and add the code to remove the cookie from a logged-in user.

## Protect routes {{{ data-action="code" data-code="isAuthenticated.go" }}} diff --git a/articles/quickstart/webapp/java-ee/interactive.md b/articles/quickstart/webapp/java-ee/interactive.md index da9f06eb97..edd4e1a132 100644 --- a/articles/quickstart/webapp/java-ee/interactive.md +++ b/articles/quickstart/webapp/java-ee/interactive.md @@ -9,7 +9,7 @@ files: - files/src/main/java/com/auth0/example/web/HomeServlet - files/src/main/java/com/auth0/example/web/LogoutServlet github: - path: https://github.com/auth0-samples/auth0-java-ee-sample/tree/master/01-Login + path: 01-Login locale: en-US --- @@ -21,12 +21,12 @@ locale: en-US ## Configure Auth0 -

Get Your Application Keys

When you signed up for Auth0, a new application was created for you, or you could have created a new one. You will need some details about that application to communicate with Auth0. You can get these details from the Application Settings section in the Auth0 dashboard.

You need the following information:

  • Domain

  • Client ID

  • Client Secret

If you download the sample from the top of this page, these details are filled out for you.

Configure Callback URLs

A callback URL is a URL in your application where Auth0 redirects the user after they have authenticated. The callback URL for your app must be added to the Allowed Callback URLs field in your Application Settings. If this field is not set, users will be unable to log in to the application and will get an error.

If you are following along with the sample project you downloaded from the top of this page, the callback URL you need to add to the Allowed Callback URLs field is http://localhost:3000/callback.

Configure Logout URLs

A logout URL is a URL in your application that Auth0 can return to after the user has been logged out of the authorization server. This is specified in the returnTo query parameter. The logout URL for your app must be added to the Allowed Logout URLs field in your Application Settings. If this field is not set, users will be unable to log out from the application and will get an error.

If you are following along with the sample project you downloaded from the top of this page, the logout URL you need to add to the Allowed Logout URLs field is http://localhost:3000/.

+

Get Your Application Keys

When you signed up for Auth0, a new application was created for you, or you could have created a new one. You will need some details about that application to communicate with Auth0. You can get these details from the Application Settings section in the Auth0 dashboard.

You need the following information:

  • Domain

  • Client ID

  • Client Secret

If you download the sample from the top of this page, these details are filled out for you.

Configure Callback URLs

A callback URL is a URL in your application where Auth0 redirects the user after they have authenticated. The callback URL for your app must be added to the Allowed Callback URLs field in your Application Settings. If this field is not set, users will be unable to log in to the application and will get an error.

If you are following along with the sample project you downloaded from the top of this page, the callback URL you need to add to the Allowed Callback URLs field is http://localhost:3000/callback.

Configure Logout URLs

A logout URL is a URL in your application that Auth0 can return to after the user has been logged out of the authorization server. This is specified in the returnTo query parameter. The logout URL for your app must be added to the Allowed Logout URLs field in your Application Settings. If this field is not set, users will be unable to log out from the application and will get an error.

If you are following along with the sample project you downloaded from the top of this page, the logout URL you need to add to the Allowed Logout URLs field is http://localhost:3000/.

## Configure Java EE to use Auth0 {{{ data-action="code" data-code="src/main/webapp/WEB-INF/web.xml" }}} -

Set up dependencies

To integrate your Java EE application with Auth0, add the following dependencies:

  • javax.javaee-api: The Java EE 8 API necessary to write applications using Java EE 8. The actual implementation is provided by the application container, so it does not need to be included in the WAR file.

  • javax.security.enterprise: The Java EE 8 Security API that enables handling security concerns in an EE application. Like the javax.javaee-api dependency, the implementation is provided by the application container, so is not included in the WAR file.

  • auth0-java-mvc-commons: The Auth0 Java MVC SDK allows you to use Auth0 with Java for server-side MVC web applications. It generates the Authorize URL that your application needs to call in order to authenticate a user using Auth0.

If you are using Maven, add these dependencies to your pom.xml:

<!-- pom.xml -->
+

Set up dependencies

To integrate your Java EE application with Auth0, add the following dependencies:

  • javax.javaee-api: The Java EE 8 API necessary to write applications using Java EE 8. The actual implementation is provided by the application container, so it does not need to be included in the WAR file.

  • javax.security.enterprise: The Java EE 8 Security API that enables handling security concerns in an EE application. Like the javax.javaee-api dependency, the implementation is provided by the application container, so is not included in the WAR file.

  • auth0-java-mvc-commons: The Auth0 Java MVC SDK allows you to use Auth0 with Java for server-side MVC web applications. It generates the Authorize URL that your application needs to call in order to authenticate a user using Auth0.

If you are using Maven, add these dependencies to your pom.xml:

<!-- pom.xml -->
 
 <dependency>
 
@@ -76,7 +76,7 @@ implementation 'com.auth0:mvc-auth-commons:1. '
 
 
-

Configure your Java EE application

The sample that accompanies this tutorial is written using JSP and tested with the WildFly application server. You may need to adjust some of the steps if you working with a different application container or technologies.

Your Java EE application needs some information in order to authenticate users with your Auth0 application. The deployment descriptor web.xml file can be used to store this information, though you could store them in a different secured location.

This information will be used to configure the auth0-java-mvc-commons library to enable users to login to your application. To learn more about the library, including its various configuration options, see the README of the library.

+

Configure your Java EE application

The sample that accompanies this tutorial is written using JSP and tested with the WildFly application server. You may need to adjust some of the steps if you working with a different application container or technologies.

Your Java EE application needs some information in order to authenticate users with your Auth0 application. The deployment descriptor web.xml file can be used to store this information, though you could store them in a different secured location.

This information will be used to configure the auth0-java-mvc-commons library to enable users to login to your application. To learn more about the library, including its various configuration options, see the README of the library.

@@ -101,7 +101,7 @@ implementation 'com.auth0:mvc-auth-commons:1. ' ## Configure Java EE Security {{{ data-action="code" data-code="src/main/java/com/auth0/example/security/Auth0AuthenticationConfig.java" }}} -

The Java EE 8 Security API introduced the HttpAuthenticationMechanism interface to enable applications to obtain a user's credentials. Default implementations exist for Basic and form-based authentication, and it provides an easy way to configure a custom authentication strategy.

To authenticate with Auth0, provide custom implementations of the following interfaces:

  • HttpAuthenticationMechanism: Responsible for handling the authentication workflow for users returning from Auth0. (JavaDoc).

  • IdentityStore: Responsible for validating the user's credentials (JavaDoc).

  • CallerPrincipal: Represents the caller principal of the current HTTP request (JavaDoc).

  • Credential: Represents the credential the caller will use to authenticate (JavaDoc).

First, make your Auth0 settings available to the application by creating an @ApplicationScoped bean to retrieve the values from the web context and make them available via getters.

Next, create a custom CallerPrincipal that represents the caller of the current request:

// src/main/java/com/auth0/example/security/Auth0JwtPrincipal.java
+

The Java EE 8 Security API introduced the HttpAuthenticationMechanism interface to enable applications to obtain a user's credentials. Default implementations exist for Basic and form-based authentication, and it provides an easy way to configure a custom authentication strategy.

To authenticate with Auth0, provide custom implementations of the following interfaces:

  • HttpAuthenticationMechanism: Responsible for handling the authentication workflow for users returning from Auth0. (JavaDoc).

  • IdentityStore: Responsible for validating the user's credentials (JavaDoc).

  • CallerPrincipal: Represents the caller principal of the current HTTP request (JavaDoc).

  • Credential: Represents the credential the caller will use to authenticate (JavaDoc).

First, make your Auth0 settings available to the application by creating an @ApplicationScoped bean to retrieve the values from the web context and make them available via getters.

Next, create a custom CallerPrincipal that represents the caller of the current request:

// src/main/java/com/auth0/example/security/Auth0JwtPrincipal.java
 
 
 
@@ -161,7 +161,7 @@ class Auth0JwtCredential implements Credential {
 
 
-

You now have defined the classes that represent a calling principal and credential. Next, create a custom implementation of IdentityStore. This class will be responsible for validating the user's credentials:

// src/main/java/com/auth0/example/security/Auth0JwtIdentityStore.java
+

You now have defined the classes that represent a calling principal and credential. Next, create a custom implementation of IdentityStore. This class will be responsible for validating the user's credentials:

// src/main/java/com/auth0/example/security/Auth0JwtIdentityStore.java
 
 
 
@@ -193,7 +193,7 @@ public class Auth0JwtIdentityStore implements IdentityStore {
 
 
-

If the credential is an Auth0Credential, the calling user is authenticated and valid, so a CredentialValidationResult created with the credential is returned to indicate success. If it is not an Auth0Credential, return CredentialValidationResult.NOT_VALIDATED_RESULT.

Before implementing the HttpAuthenticationMechanism interface that will use all these collaborators, create a bean that will provide a configured instance of the AuthenticationController from the Auth0 Java MVC SDK. The AuthenticationController is used to build the authorization URL where users will login, and handle the token exchange to authenticate users.

  • If your Auth0 Application is configured to use the RS256 signing algorithm (the default when creating a new Auth0 Application), you need to configure a JwkProvider to fetch the public key used to verify the token's signature. See the jwks-rsa-java repository to learn about additional configuration options.

  • If your Auth0 Application is configured to use the HS256 signing algorithm, there is no need to configure the JwkProvider.

To learn more about the available signing algorithms, refer to the documentation.

The sample below shows how to configure the AuthenticationController for use with the RS256 signing algorithm:

// src/main/java/com/auth0/example/security/Auth0AuthenticationProvider.java
+

If the credential is an Auth0Credential, the calling user is authenticated and valid, so a CredentialValidationResult created with the credential is returned to indicate success. If it is not an Auth0Credential, return CredentialValidationResult.NOT_VALIDATED_RESULT.

Before implementing the HttpAuthenticationMechanism interface that will use all these collaborators, create a bean that will provide a configured instance of the AuthenticationController from the Auth0 Java MVC SDK. The AuthenticationController is used to build the authorization URL where users will login, and handle the token exchange to authenticate users.

  • If your Auth0 Application is configured to use the RS256 signing algorithm (the default when creating a new Auth0 Application), you need to configure a JwkProvider to fetch the public key used to verify the token's signature. See the jwks-rsa-java repository to learn about additional configuration options.

  • If your Auth0 Application is configured to use the HS256 signing algorithm, there is no need to configure the JwkProvider.

To learn more about the available signing algorithms, refer to the documentation.

The sample below shows how to configure the AuthenticationController for use with the RS256 signing algorithm:

// src/main/java/com/auth0/example/security/Auth0AuthenticationProvider.java
 
 
 
@@ -297,12 +297,12 @@ public class Auth0AuthenticationMechanism implements HttpAuthenticationMechanism
 
 
-

The class overrides the validateRequest method, which is called on every request to our application, and is responsible for notifying the container of the authentication status.

This sample uses the Authorization Code Flow to exchange an Authorization Code for a token during the authentication flow. If this request is to the /callback endpoint and contains the code request parameter, it does a few important things:

  • Calls the handle method of the AuthenticationController to exchange the Authorization Code for an ID token and an access token.

  • Uses the ID token to create a new Auth0Credential.

  • Calls the validate method of the custom IdentityStore implementation to obtain the validation result.

  • Notifies the application container of the login status.

If the requested resource is not /callback, return httpMessageContext.doNothing() to allow the request processing to continue. You will see shortly how to use the authentication information when triggering authentication and displaying web views.

Finally, note that the @AutoApplySession annotation has been added to allow the container to create a session for the authenticated user.

+

The class overrides the validateRequest method, which is called on every request to our application, and is responsible for notifying the container of the authentication status.

This sample uses the Authorization Code Flow to exchange an Authorization Code for a token during the authentication flow. If this request is to the /callback endpoint and contains the code request parameter, it does a few important things:

  • Calls the handle method of the AuthenticationController to exchange the Authorization Code for an ID token and an access token.

  • Uses the ID token to create a new Auth0Credential.

  • Calls the validate method of the custom IdentityStore implementation to obtain the validation result.

  • Notifies the application container of the login status.

If the requested resource is not /callback, return httpMessageContext.doNothing() to allow the request processing to continue. You will see shortly how to use the authentication information when triggering authentication and displaying web views.

Finally, note that the @AutoApplySession annotation has been added to allow the container to create a session for the authenticated user.

## Trigger authentication {{{ data-action="code" data-code="src/main/java/com/auth0/example/web/LoginServlet.java" }}} -

To enable a user to log in, create a Servlet that will handle requests to the /login path.

The LoginController is responsible for redirecting the request to the proper authorization URL, where the user can authenticate with Auth0. It uses the AuthenticationController from the Auth0 Java MVC SDK to build the correct authorization URL, using the configuration values injected via Auth0AuthenticationConfig. By default, this sample requests the "openid profile email" scopes, to allow the application to retrieve basic profile information from the authenticated user. You can read more about these scopes in the OpenID Connect Scopes documentation.

Once the user has entered their credentials and authorized the requested permissions, Auth0 will issue a request to the callbackUrl, and include a code query parameter which can be exchanged for an ID token and an access token. Recall that the Auth0HttpAuthenticationMechanism created above handles this exchange so that it can notify the application container of authentication status. This allows the Servlet that handles requests to the /callback path to simply forward the request on to the originally requested resource prior to logging in, or simply redirect to the home page:

// src/main/com/auth0/example/web/CallbackServlet.java
+

To enable a user to log in, create a Servlet that will handle requests to the /login path.

The LoginController is responsible for redirecting the request to the proper authorization URL, where the user can authenticate with Auth0. It uses the AuthenticationController from the Auth0 Java MVC SDK to build the correct authorization URL, using the configuration values injected via Auth0AuthenticationConfig. By default, this sample requests the "openid profile email" scopes, to allow the application to retrieve basic profile information from the authenticated user. You can read more about these scopes in the OpenID Connect Scopes documentation.

Once the user has entered their credentials and authorized the requested permissions, Auth0 will issue a request to the callbackUrl, and include a code query parameter which can be exchanged for an ID token and an access token. Recall that the Auth0HttpAuthenticationMechanism created above handles this exchange so that it can notify the application container of authentication status. This allows the Servlet that handles requests to the /callback path to simply forward the request on to the originally requested resource prior to logging in, or simply redirect to the home page:

// src/main/com/auth0/example/web/CallbackServlet.java
 
 
 
@@ -337,7 +337,7 @@ public class CallbackServlet extends HttpServlet {
 ## Display user information {{{ data-action="code" data-code="src/main/java/com/auth0/example/web/HomeServlet.java" }}}
 
 
-

You can use the Auth0JwtPrincipal to get profile information for the authenticated user. The HomeServlet.java code sample demonstrates how to use the claims on the ID token to set profile data as a request attribute.

You can then use that profile information in your view to display information about the user:

<!-- src/main/webapp/WEB-INF/jsp/fragments/navbar.jspf -->
+

You can use the Auth0JwtPrincipal to get profile information for the authenticated user. The HomeServlet.java code sample demonstrates how to use the claims on the ID token to set profile data as a request attribute.

You can then use that profile information in your view to display information about the user:

<!-- src/main/webapp/WEB-INF/jsp/fragments/navbar.jspf -->
 
 
 
@@ -399,7 +399,7 @@ public class CallbackServlet extends HttpServlet {
 ## Run the sample
 
 
-

To build and run the sample, execute the wildfly:run Maven goal to start an embedded WildFly application server with this application deployed to it. See the WildFly Maven Plugin documentation for more information.

If you are using Linux or MacOS:

./mvnw clean wildfly:run
+

To build and run the sample, execute the wildfly:run Maven goal to start an embedded WildFly application server with this application deployed to it. See the WildFly Maven Plugin documentation for more information.

If you are using Linux or MacOS:

./mvnw clean wildfly:run
 
 
diff --git a/articles/quickstart/webapp/java-spring-boot/interactive.md b/articles/quickstart/webapp/java-spring-boot/interactive.md index f56ec70bb7..7f78b1680b 100644 --- a/articles/quickstart/webapp/java-spring-boot/interactive.md +++ b/articles/quickstart/webapp/java-spring-boot/interactive.md @@ -9,24 +9,24 @@ files: - files/HomeController - files/SecurityConfigWithLogout github: - path: https://github.com/auth0-samples/auth0-spring-boot-login-samples/tree/master/mvc-login + path: mvc-login locale: en-US --- # Add Login to your Spring Web Application -

Using Spring WebFlux?

This tutorial uses Spring MVC. If you are using Spring WebFlux, the steps to add authentication are similar, but some implementation details are different. Refer to the Spring Boot WebFlux Sample Code to see how to integrate Auth0 with your Spring Boot WebFlux application.

+

Using Spring WebFlux?

This tutorial uses Spring MVC. If you are using Spring WebFlux, the steps to add authentication are similar, but some implementation details are different. Refer to the Spring Boot WebFlux Sample Code to see how to integrate Auth0 with your Spring Boot WebFlux application.

## Configure Auth0 -

To use Auth0 services, you’ll need to have an application set up in the Auth0 Dashboard. The Auth0 application is where you will configure how you want authentication to work for the project you are developing.

Configure an application

Use the interactive selector to create a new Auth0 application or select an existing application that represents the project you want to integrate with. Every application in Auth0 is assigned an alphanumeric, unique client ID that your application code will use to call Auth0 APIs through the SDK.

Any settings you configure using this quickstart will automatically update for your Application in the Dashboard, which is where you can manage your Applications in the future.

If you would rather explore a complete configuration, you can view a sample application instead.

Configure Callback URLs

A callback URL is a URL in your application that you would like Auth0 to redirect users to after they have authenticated. If not set, users will not be returned to your application after they log in.

If you are following along with our sample project, set this to

http://localhost:3000/login/oauth2/code/okta.

Configure Logout URLs

A logout URL is a URL in your application that you would like Auth0 to redirect users to after they have logged out. If not set, users will not be able to log out from your application and will receive an error.

If you are following along with our sample project, set this to

http://localhost:3000.

+

To use Auth0 services, you’ll need to have an application set up in the Auth0 Dashboard. The Auth0 application is where you will configure how you want authentication to work for the project you are developing.

Configure an application

Use the interactive selector to create a new Auth0 application or select an existing application that represents the project you want to integrate with. Every application in Auth0 is assigned an alphanumeric, unique client ID that your application code will use to call Auth0 APIs through the SDK.

Any settings you configure using this quickstart will automatically update for your Application in the Dashboard, which is where you can manage your Applications in the future.

If you would rather explore a complete configuration, you can view a sample application instead.

Configure Callback URLs

A callback URL is a URL in your application that you would like Auth0 to redirect users to after they have authenticated. If not set, users will not be returned to your application after they log in.

If you are following along with our sample project, set this to

http://localhost:3000/login/oauth2/code/okta.

Configure Logout URLs

A logout URL is a URL in your application that you would like Auth0 to redirect users to after they have logged out. If not set, users will not be able to log out from your application and will receive an error.

If you are following along with our sample project, set this to

http://localhost:3000.

## Configure Sprint Boot application -

Add Spring dependencies

To integrate your Spring Boot application with Auth0, include the Okta Spring Boot Starter in your application's dependencies.

This guide uses Thymeleaf and the Spring Security integration module for the view layer. If you are using a different view technology, the Spring Security configuration and components remain the same.

If you're using Gradle, you can include these dependencies as shown below.

plugins {
+

Add Spring dependencies

To integrate your Spring Boot application with Auth0, include the Okta Spring Boot Starter in your application's dependencies.

This guide uses Thymeleaf and the Spring Security integration module for the view layer. If you are using a different view technology, the Spring Security configuration and components remain the same.

If you're using Gradle, you can include these dependencies as shown below.

plugins {
 
  id 'java'
 
@@ -125,7 +125,7 @@ implementation 'nz.net.ultraq.thymeleaf:thymeleaf-layout-dialect'
 ## Configure Spring Security {{{ data-action="code" data-code="application.yml" }}}
 
 
-

The Okta Spring Boot Starter makes it easy to configure your application with Auth0. The sample below uses an application.yml file, though you can also use properties files or any of the other supported externalization mechanisms.

#src/main/resources/application.yml
+

The Okta Spring Boot Starter makes it easy to configure your application with Auth0. The sample below uses an application.yml file, though you can also use properties files or any of the other supported externalization mechanisms.

#src/main/resources/application.yml
 
 
 
@@ -158,7 +158,7 @@ server:
 ## Add login to your application {{{ data-action="code" data-code="SecurityConfig.java" }}}
 
 
-

To enable user login with Auth0, create a class that will register a SecurityFilterChain, and add the @Configuration annotation.

You can configure the HttpSecurity instance to require authentication on all or certain paths. For example, to require authentication on all paths except the home page:

http.authorizeHttpRequests(authorize -> authorize
+

To enable user login with Auth0, create a class that will register a SecurityFilterChain, and add the @Configuration annotation.

You can configure the HttpSecurity instance to require authentication on all or certain paths. For example, to require authentication on all paths except the home page:

http.authorizeHttpRequests(authorize -> authorize
 
         .requestMatchers("/").permitAll()
 
@@ -178,18 +178,18 @@ server:
 ## Add controller {{{ data-action="code" data-code="HomeController.java" }}}
 
 
-

Create a controller to handle the incoming request. This controller renders the index.html page. When the user authenticates, the application retrieves the users's profile information attributes to render the page.

spring boot step 6 checkpoint

When you click the login link, verify the application redirects you to the Auth0 Universal Login page and that you can now log in or sign up using a username and password or a social provider.

+

Create a controller to handle the incoming request. This controller renders the index.html page. When the user authenticates, the application retrieves the users's profile information attributes to render the page.

spring boot step 6 checkpoint

When you click the login link, verify the application redirects you to the Auth0 Universal Login page and that you can now log in or sign up using a username and password or a social provider.

-

Auth0 enables the Google social provider by default on new tenants and offers you developer keys to test logging in with social identity providers. However, these developer keys have some limitations that may cause your application to behave differently. For more details on what this behavior may look like and how to fix it, consult the Test Social Connections with Auth0 Developer Keys document.

+

Auth0 enables the Google social provider by default on new tenants and offers you developer keys to test logging in with social identity providers. However, these developer keys have some limitations that may cause your application to behave differently. For more details on what this behavior may look like and how to fix it, consult the Test Social Connections with Auth0 Developer Keys document.

## Add logout to your application {{{ data-action="code" data-code="SecurityConfigWithLogout.java" }}} -

Now that users can log into your application, they need a way to log out. By default, when logout is enabled, Spring Security will log the user out of your application and clear the session. To enable successful logout of Auth0, you can provide a LogoutHandler to redirect users to your Auth0 logout endpoint (https://{yourDomain}/v2/logout) and then immediately redirect them to your application.

In the SecurityConfig class, provide a LogoutHandler that redirects to the Auth0 logout endpoint, and configure the HttpSecurity to add the logout handler

spring boot step 7 checkpoint

When you click logout link, the application should redirect you to the address you specified as one of the "Allowed Logout URLs" in the "Settings" and you are no longer logged in to your application.

+

Now that users can log into your application, they need a way to log out. By default, when logout is enabled, Spring Security will log the user out of your application and clear the session. To enable successful logout of Auth0, you can provide a LogoutHandler to redirect users to your Auth0 logout endpoint (https://{yourDomain}/v2/logout) and then immediately redirect them to your application.

In the SecurityConfig class, provide a LogoutHandler that redirects to the Auth0 logout endpoint, and configure the HttpSecurity to add the logout handler

spring boot step 7 checkpoint

When you click logout link, the application should redirect you to the address you specified as one of the "Allowed Logout URLs" in the "Settings" and you are no longer logged in to your application.

diff --git a/articles/quickstart/webapp/java/interactive.md b/articles/quickstart/webapp/java/interactive.md index 4043517a9f..8ed2921eff 100644 --- a/articles/quickstart/webapp/java/interactive.md +++ b/articles/quickstart/webapp/java/interactive.md @@ -10,7 +10,7 @@ files: - files/HomeServlet - files/LogoutServlet github: - path: https://github.com/auth0-samples/auth0-servlet-sample/tree/master/01-Login + path: 01-Login locale: en-US --- @@ -22,12 +22,12 @@ locale: en-US ## Configure Auth0 -

To use Auth0 services, you’ll need to have an application set up in the Auth0 Dashboard. The Auth0 application is where you will configure how you want authentication to work for the project you are developing.

Configure an application

Use the interactive selector to create a new Auth0 application or select an existing application that represents the project you want to integrate with. Every application in Auth0 is assigned an alphanumeric, unique client ID that your application code will use to call Auth0 APIs through the SDK.

Any settings you configure using this quickstart will automatically update for your Application in the Dashboard, which is where you can manage your Applications in the future.

If you would rather explore a complete configuration, you can view a sample application instead.

Configure Callback URLs

A callback URL is a URL in your application that you would like Auth0 to redirect users to after they have authenticated. If not set, users will not be returned to your application after they log in.

If you are following along with our sample project, set this to http://localhost:3000/.

Configure Logout URLs

A logout URL is a URL in your application that you would like Auth0 to redirect users to after they have logged out. If not set, users will not be able to log out from your application and will receive an error.

If you are following along with our sample project, set this to http://localhost:3000/.

+

To use Auth0 services, you’ll need to have an application set up in the Auth0 Dashboard. The Auth0 application is where you will configure how you want authentication to work for the project you are developing.

Configure an application

Use the interactive selector to create a new Auth0 application or select an existing application that represents the project you want to integrate with. Every application in Auth0 is assigned an alphanumeric, unique client ID that your application code will use to call Auth0 APIs through the SDK.

Any settings you configure using this quickstart will automatically update for your Application in the Dashboard, which is where you can manage your Applications in the future.

If you would rather explore a complete configuration, you can view a sample application instead.

Configure Callback URLs

A callback URL is a URL in your application that you would like Auth0 to redirect users to after they have authenticated. If not set, users will not be returned to your application after they log in.

If you are following along with our sample project, set this to http://localhost:3000/callback.

Configure Logout URLs

A logout URL is a URL in your application that you would like Auth0 to redirect users to after they have logged out. If not set, users will not be able to log out from your application and will receive an error.

If you are following along with our sample project, set this to http://localhost:3000/.

## Integrate Auth0 in your application -

Setup dependencies

To integrate your Java application with Auth0, add the following dependencies:

  • javax.servlet-api

    : is the library that allows you to create Java Servlets. You then need to add a Server dependency like Tomcat or Gretty, which one is up to you. Check our sample code for more information.

  • auth0-java-mvc-commons: is the Java library that allows you to use Auth0 with Java for server-side MVC web apps. It generates the Authorize URL that you need to call in order to authenticate and validates the result received on the way back to finally obtain the Auth0 Tokens that identify the user.

If you are using Gradle, add them to your build.gradle:

// build.gradle
+

Setup dependencies

To integrate your Java application with Auth0, add the following dependencies:

  • javax.servlet-api

    : is the library that allows you to create Java Servlets. You then need to add a Server dependency like Tomcat or Gretty, which one is up to you. Check our sample code for more information.

  • auth0-java-mvc-commons: is the Java library that allows you to use Auth0 with Java for server-side MVC web apps. It generates the Authorize URL that you need to call in order to authenticate and validates the result received on the way back to finally obtain the Auth0 Tokens that identify the user.

If you are using Gradle, add them to your build.gradle:

// build.gradle
 
 
 
@@ -67,21 +67,9 @@ compile 'com.auth0:mvc-auth-commons:1.+'W
 
 ## Configure your Java application {{{ data-action="code" data-code="web.xml" }}}
 
-Your Java App needs some information in order to authenticate against your Auth0 account. The samples read this information from the deployment descriptor file `src/main/webapp/WEB-INF/web.xml`, but you could store them anywhere else.
 
-This information will be used to configure the **auth0-java-mvc-commons** library to enable users to login to your application. To learn more about the library, including its various configuration options, see the library's documentation.
+

Your Java App needs some information in order to authenticate against your Auth0 account. The samples read this information from the deployment descriptor file src/main/webapp/WEB-INF/web.xml, but you could store them anywhere else.

This information will be used to configure the auth0-java-mvc-commons library to enable users to login to your application. To learn more about the library, including its various configuration options, see the library's documentation.

Check populated attributes

If you downloaded this sample using the Download Sample button, the domain, clientId and clientSecret attributes will be populated for you. You should verify that the values are correct, especially if you have multiple Auth0 applications in your account.

Project structure

The example project, which can be downloaded using the Download Sample button, has the following structure:

- src
 
-
-::: panel Check populated attributes
-If you downloaded this sample using the **Download Sample** button, the `domain`, `clientId` and `clientSecret` attributes will be populated for you. You should verify that the values are correct, especially if you have multiple Auth0 applications in your account.
-:::
-
-### Project structure
-
-The example project, which can be downloaded using the **Download Sample** button, has the following structure:
-
-```text
-- src
 -- main
 
 ---- java
@@ -123,7 +111,7 @@ The example project, which can be downloaded using the **Download Sample** butto
 ## Create the AuthenticationController {{{ data-action="code" data-code="AuthenticationControllerProvider.java#5:26" }}}
 
 
-

To enable users to authenticate, create an instance of the AuthenticationController provided by the auth0-java-mvc-commons SDK using the domain, clientId, and clientSecret. The sample shows how to configure the component for use with tokens signed using the RS256 asymmetric signing algorithm, by specifying a JwkProvider to fetch the public key used to verify the token's signature. See the jwks-rsa-java repository to learn about additional configuration options. If you are using HS256, there is no need to configure the JwkProvider.

The AuthenticationController does not store any context, and is inteded to be reused. Unneccessary creation may result in additonal resources being created which could impact performance.

+

To enable users to authenticate, create an instance of the AuthenticationController provided by the auth0-java-mvc-commons SDK using the domain, clientId, and clientSecret. The sample shows how to configure the component for use with tokens signed using the RS256 asymmetric signing algorithm, by specifying a JwkProvider to fetch the public key used to verify the token's signature. See the jwks-rsa-java repository to learn about additional configuration options. If you are using HS256, there is no need to configure the JwkProvider.

The AuthenticationController does not store any context, and is inteded to be reused. Unneccessary creation may result in additonal resources being created which could impact performance.

## Login Redirection {{{ data-action="code" data-code="LoginServlet.java#21:23" }}} @@ -142,24 +130,14 @@ The example project, which can be downloaded using the **Download Sample** butto ## Handle logout {{{ data-action="code" data-code="LogoutServlet.java#13:30" }}} -To properly handle logout, we need to clear the session and log the user out of Auth0. This is handled in the `LogoutServlet` of our sample application. -First, we clear the session by calling `request.getSession().invalidate()`. We then construct the logout URL, being sure to include the `returnTo` query parameter, which is where the user will be redirected to after logging out. Finally, we redirect the response to our logout URL. +

To properly handle logout, we need to clear the session and log the user out of Auth0. This is handled in the LogoutServlet of our sample application.

First, we clear the session by calling request.getSession().invalidate(). We then construct the logout URL, being sure to include the returnTo query parameter, which is where the user will be redirected to after logging out. Finally, we redirect the response to our logout URL.

-## Run the sample {{{ data-action=code data-code="LogoutServlet.java#13:30" }}} +## Run the sample -To run the sample from a terminal, change the directory to the root folder of the project and execute the following line: -```bash -./gradlew clean appRun -``` +

To run the sample from a terminal, change the directory to the root folder of the project and execute the following line:

./gradlew clean app
 
-After a few seconds, the application will be accessible on `http://localhost:3000/`. Try to access the protected resource http://localhost:3000/portal/home and note how you're redirected by the `Auth0Filter` to the Auth0 Login Page. The widget displays all the social and database connections that you have defined for this application in the dashboard.
-
-![Auth0 Universal Login](/media/quickstarts/universal-login.png)
-
-After a successful authentication, you'll be able to see the home page contents.
-
-![Display Token](/media/articles/java/display-token.png)
+
-Log out by clicking the **logout** button at the top right of the home page. +

After a few seconds, the application will be accessible on http://localhost:3000/. Try to access the protected resource http://localhost:3000/portal/home and note how you're redirected by the Auth0Filter to the Auth0 Login Page. The widget displays all the social and database connections that you have defined for this application in the dashboard.

After a successful authentication, you'll be able to see the home page contents.

Log out by clicking the logout button at the top right of the home page.

diff --git a/articles/quickstart/webapp/laravel/interactive.md b/articles/quickstart/webapp/laravel/interactive.md index 2078a374eb..070da053e0 100644 --- a/articles/quickstart/webapp/laravel/interactive.md +++ b/articles/quickstart/webapp/laravel/interactive.md @@ -5,57 +5,249 @@ interactive: true files: - files/routes/web github: - path: https://github.com/auth0-samples/laravel/tree/bf356d877b5dae566286fc8400da94b8b4b0ac76/sample + path: sample locale: en-US --- # Add Login to Your Laravel Application -

Auth0's Laravel SDK allows you to quickly add authentication, user profile management, and routing access control to your Laravel application. This guide demonstrates how to integrate Auth0 with a new (or existing) Laravel 9 or 10 application.

+

Auth0's Laravel SDK allows you to quickly add authentication, user profile management, and routing access control to your Laravel application. This guide demonstrates how to integrate Auth0 with a new (or existing) Laravel 9 or 10 application.

Test Change

## Laravel Installation -

If you do not already have a Laravel application set up, open a shell to a suitable directory for a new project and run the following command:

composer create-project --prefer-dist laravel/laravel auth0-laravel-app ^9.0

All the commands in this guide assume you are running them from the root of your Laravel project, directory so you should cd into the new project directory:

cd auth0-laravel-app

+

If you do not already have a Laravel application set up, open a shell to a suitable directory for a new project and run the following command:

composer create-project --prefer-dist laravel/laravel auth0-laravel-app ^9.0
+
+
+ +

All the commands in this guide assume you are running them from the root of your Laravel project, directory so you should cd into the new project directory:

cd auth0-laravel-app
+
+
+ +

## SDK Installation -

Run the following command within your project directory to install the Auth0 Laravel SDK:

composer require auth0/login:^7.8 --update-with-all-dependencies

Then generate an SDK configuration file for your application:

php artisan vendor:publish --tag auth0

+

Run the following command within your project directory to install the Auth0 Laravel SDK:

composer require auth0/login:^7.8 --update-with-all-dependencies
+
+
+ +

Then generate an SDK configuration file for your application:

php artisan vendor:publish --tag auth0
+
+
+ +

## SDK Configuration -

Run the following command from your project directory to download the Auth0 CLI:

curl -sSfL https://raw.githubusercontent.com/auth0/auth0-cli/main/install.sh | sh -s -- -b .

Then authenticate the CLI with your Auth0 account, choosing "as a user" when prompted:

./auth0 login

Next, create a new application with Auth0:

You should also create a new API:

This produces two files in your project directory that configure the SDK.

As these files contain credentials it's important to treat these as sensitive. You should ensure you do not commit these to version control. If you're using Git, you should add them to your .gitignore file:

echo ".auth0.*.json" >> .gitignore

+

Run the following command from your project directory to download the Auth0 CLI:

curl -sSfL https://raw.githubusercontent.com/auth0/auth0-cli/main/install.sh | sh -s -- -b .
+
+
+ +

Then authenticate the CLI with your Auth0 account, choosing "as a user" when prompted:

./auth0 login
+
+
+ +

Next, create a new application with Auth0:

./auth0 apps create \
+
+  --name "My Laravel Application" \
+
+  --type "regular" \
+
+  --auth-method "post" \
+
+  --callbacks "http://localhost:8000/callback" \
+
+  --logout-urls "http://localhost:8000" \
+
+  --reveal-secrets \
+
+  --no-input \
+
+  --json > .auth0.app.json
+
+
+ +

You should also create a new API:

./auth0 apis create \
+
+  --name "My Laravel Application's API" \
+
+  --identifier "https://github.com/auth0/laravel-auth0" \
+
+  --offline-access \
+
+  --no-input \
+
+  --json > .auth0.api.json
+
+
+ +

This produces two files in your project directory that configure the SDK.

As these files contain credentials it's important to treat these as sensitive. You should ensure you do not commit these to version control. If you're using Git, you should add them to your .gitignore file:

echo ".auth0.*.json" >> .gitignore
+
+
+ +

## Login Routes -

The SDK automatically registers all the necessary routes for your application's users to authenticate.

If you require more control over these, or if they conflict with existing routes in your application, you can manually register the SDK's controllers instead. Please see the SDK's README for advanced integrations.

+

The SDK automatically registers all the necessary routes for your application's users to authenticate.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
**Routes****Purpose**
/loginInitiates the authentication flow.
/logoutLogs the user out.
/callbackHandles the callback from Auth0.

If you require more control over these, or if they conflict with existing routes in your application, you can manually register the SDK's controllers instead. Please see the SDK's README for advanced integrations.

## Access Control {{{ data-action="code" data-code="routes/web.php#6:12" }}} -

Laravel's authentication facilities use "guards" to define how users are authenticated for each request. You can use the Auth0 SDK's authentication guard to restrict access to your application's routes.

To require users to authenticate before accessing a route, you can use Laravel's auth middleware.

You can also require authenticated users to have specific permissions by combining this with Laravel's can middleware.

+

Laravel's authentication facilities use "guards" to define how users are authenticated for each request. You can use the Auth0 SDK's authentication guard to restrict access to your application's routes.

To require users to authenticate before accessing a route, you can use Laravel's auth middleware.

Route::get('/private', function () {
+
+  return response('Welcome! You are logged in.');
+
+})->middleware('auth');
+
+
+ +

You can also require authenticated users to have specific permissions by combining this with Laravel's can middleware.

Route::get('/scope', function () {
+
+    return response('You have `read:messages` permission, and can therefore access this resource.');
+
+})->middleware('auth')->can('read:messages');
+
+
+ +

## User Information {{{ data-action="code" data-code="routes/web.php#14:24" }}} -

Information about the authenticated user is available through Laravel's Auth Facade, or the auth() helper function.

For example, to retrieve the user's identifier and email address:

+

Information about the authenticated user is available through Laravel's Auth Facade, or the auth() helper function.

For example, to retrieve the user's identifier and email address:

Route::get('/', function () {
+
+  if (! auth()->check()) {
+
+    return response('You are not logged in.');
+
+  }
+
+
+
+  $user = auth()->user();
+
+  $name = $user->name ?? 'User';
+
+  $email = $user->email ?? '';
+
+
+
+  return response("Hello {$name}! Your email address is {$email}.");
+
+});;
+
+
+ +

## User Management {{{ data-action="code" data-code="routes/web.php#26:43" }}} -

You can update user information using the Auth0 Management API. All Management endpoints are accessible through the SDK's management() method.

Before making Management API calls you must enable your application to communicate with the Management API. This can be done from the Auth0 Dashboard's API page, choosing Auth0 Management API, and selecting the 'Machine to Machine Applications' tab. Authorize your Laravel application, and then click the down arrow to choose the scopes you wish to grant.

For the following example, in which we will update a user's metadata and assign a random favorite color, you should grant the read:users and update:users scopes. A list of API endpoints and the required scopes can be found in the Management API documentation.

A quick reference guide of all the SDK's Management API methods is available here.

+

You can update user information using the Auth0 Management API. All Management endpoints are accessible through the SDK's management() method.

Before making Management API calls you must enable your application to communicate with the Management API. This can be done from the Auth0 Dashboard's API page, choosing Auth0 Management API, and selecting the 'Machine to Machine Applications' tab. Authorize your Laravel application, and then click the down arrow to choose the scopes you wish to grant.

For the following example, in which we will update a user's metadata and assign a random favorite color, you should grant the read:users and update:users scopes. A list of API endpoints and the required scopes can be found in the Management API documentation.

use Auth0\Laravel\Facade\Auth0;
+
+
+
+Route::get('/colors', function () {
+
+  $endpoint = Auth0::management()->users();
+
+
+
+  $colors = ['red', 'blue', 'green', 'black', 'white', 'yellow', 'purple', 'orange', 'pink', 'brown'];
+
+
+
+  $endpoint->update(
+
+    id: auth()->id(),
+
+    body: [
+
+        'user_metadata' => [
+
+            'color' => $colors[random_int(0, count($colors) - 1)]
+
+        ]
+
+    ]
+
+  );
+
+
+
+  $metadata = $endpoint->get(auth()->id());
+
+  $metadata = Auth0::json($metadata);
+
+
+
+  $color = $metadata['user_metadata']['color'] ?? 'unknown';
+
+  $name = auth()->user()->name;
+
+
+
+  return response("Hello {$name}! Your favorite color is {$color}.");
+
+})->middleware('auth');
+
+
+ +

A quick reference guide of all the SDK's Management API methods is available here.

## Run the Application -

You are now ready to start your Laravel application, so it can accept requests:

php artisan serve

Laravel - Step 8 - Run the Application - Checkpoint

Open your web browser and try accessing the following routes:

+

You are now ready to start your Laravel application, so it can accept requests:

php artisan serve

Laravel - Step 8 - Run the Application - Checkpoint

Open your web browser and try accessing the following routes:

-

Additional Reading

  • User Repositories and Models extends the Auth0 Laravel SDK to use custom user models, and how to store and retrieve users from a database.

  • Hooking Events covers how to listen for events raised by the Auth0 Laravel SDK, to fully customize the behavior of your integration.

  • Management API support is built into the Auth0 Laravel SDK, allowing you to interact with the Management API from your Laravel application.

+

Additional Reading

  • User Repositories and Models extends the Auth0 Laravel SDK to use custom user models, and how to store and retrieve users from a database.

  • Hooking Events covers how to listen for events raised by the Auth0 Laravel SDK, to fully customize the behavior of your integration.

  • Management API support is built into the Auth0 Laravel SDK, allowing you to interact with the Management API from your Laravel application.

diff --git a/articles/quickstart/webapp/nextjs/01-login.md b/articles/quickstart/webapp/nextjs/01-login.md index 74d19680bc..7bffa91d5f 100644 --- a/articles/quickstart/webapp/nextjs/01-login.md +++ b/articles/quickstart/webapp/nextjs/01-login.md @@ -14,7 +14,7 @@ useCase: quickstart --- -<%= include('../_includes/_getting_started', { library: 'Next.js', callback: 'http://localhost:3000/auth/callback' }) %> +<%= include('../_includes/_getting_started', { library: 'Next.js', callback: 'http://localhost:3000/api/auth/callback' }) %> <%= include('../../../_includes/_logout_url', { returnTo: 'http://localhost:3000' }) %> @@ -23,133 +23,98 @@ useCase: quickstart Run the following command within your project directory to install the Auth0 Next.js SDK: ```sh -npm install @auth0/nextjs-auth0 +npm install @auth0/nextjs-auth0@3 ``` The SDK exposes methods and variables that help you integrate Auth0 with your Next.js application using Route Handlers on the backend and React Context with React Hooks on the frontend. ### Configure the SDK -In the root directory of your project, create the file `.env.local` with the following environment variables: +In the root directory of your project, add the file `.env.local` with the following environment variables: ```sh AUTH0_SECRET='use [openssl rand -hex 32] to generate a 32 bytes value' -APP_BASE_URL='http://localhost:3000' -AUTH0_DOMAIN='https://${account.namespace}' +AUTH0_BASE_URL='http://localhost:3000' +AUTH0_ISSUER_BASE_URL='https://${account.namespace}' AUTH0_CLIENT_ID='${account.clientId}' AUTH0_CLIENT_SECRET='${account.clientSecret}' -'If your application is API authorized add the variables AUTH0_AUDIENCE and AUTH0_SCOPE' -AUTH0_AUDIENCE='your_auth_api_identifier' -AUTH0_SCOPE='openid profile email read:shows' ``` - `AUTH0_SECRET`: A long secret value used to encrypt the session cookie. You can generate a suitable string using `openssl rand -hex 32` on the command line. -- `APP_BASE_URL`: The base URL of your application -- `AUTH0_DOMAIN`: The URL of your Auth0 tenant domain -- `AUTH0_CLIENT_ID`: Your Auth0 application's Client ID -- `AUTH0_CLIENT_SECRET`: Your Auth0 application's Client Secret +- `AUTH0_BASE_URL`: The base URL of your application. +- `AUTH0_ISSUER_BASE_URL`: The URL of your Auth0 tenant domain. If you are using a Custom Domain with Auth0, set this to the value of your Custom Domain instead of the value reflected in the "Settings" tab. +- `AUTH0_CLIENT_ID`: Your Auth0 application's Client ID. +- `AUTH0_CLIENT_SECRET`: Your Auth0 application's Client Secret. -The SDK will read these values from the Node.js process environment and configure itself automatically. +The SDK will read these values from the Node.js process environment and automatically configure itself. -::: note -Manually add the values for `AUTH0_AUDIENCE` and `AUTH_SCOPE` to the file `lib/auth0.js`. These values are not configured automatically. -If you are using a Custom Domain with Auth0, set `AUTH0_DOMAIN` to the value of your Custom Domain instead of the value reflected in the application "Settings" tab. -::: +### Add the dynamic API route handler -### Create the Auth0 SDK Client +Create a file at `app/api/auth/[auth0]/route.js`. This is your Route Handler file with a Dynamic Route Segment. -Create a file at `lib/auth0.js` to add an instance of the Auth0 client. This instance provides methods for handling authentication, sesssions and user data. +Then, import the `handleAuth` method from the SDK and call it from the `GET` export. ```javascript -// lib/auth0.js - -import { Auth0Client } from "@auth0/nextjs-auth0/server"; - -// Initialize the Auth0 client -export const auth0 = new Auth0Client({ - // Options are loaded from environment variables by default - // Ensure necessary environment variables are properly set - // domain: process.env.AUTH0_DOMAIN, - // clientId: process.env.AUTH0_CLIENT_ID, - // clientSecret: process.env.AUTH0_CLIENT_SECRET, - // appBaseUrl: process.env.APP_BASE_URL, - // secret: process.env.AUTH0_SECRET, - - authorizationParameters: { - // In v4, the AUTH0_SCOPE and AUTH0_AUDIENCE environment variables for API authorized applications are no longer automatically picked up by the SDK. - // Instead, we need to provide the values explicitly. - scope: process.env.AUTH0_SCOPE, - audience: process.env.AUTH0_AUDIENCE, - } -}); +// app/api/auth/[auth0]/route.js +import { handleAuth } from '@auth0/nextjs-auth0'; + +export const GET = handleAuth(); ``` -### Add the Authentication Middleware +This creates the following routes: -The Next.js Middleware allows you to run code before a request is completed. -Create a `middleware.ts` file. This file is used to enforce authentication on specific routes. +- `/api/auth/login`: The route used to perform login with Auth0. +- `/api/auth/logout`: The route used to log the user out. +- `/api/auth/callback`: The route Auth0 will redirect the user to after a successful login. +- `/api/auth/me`: The route to fetch the user profile from. -```javascript -import type { NextRequest } from "next/server"; -import { auth0 } from "./lib/auth0"; +::: note +This QuickStart targets the Next.js App Router. If you're using the Pages Router, check out the example in the SDK's README. +::: -export async function middleware(request: NextRequest) { - return await auth0.middleware(request); -} +### Add the `UserProvider` component -export const config = { - matcher: [ - /* - * Match all request paths except for the ones starting with: - * - _next/static (static files) - * - _next/image (image optimization files) - * - favicon.ico, sitemap.xml, robots.txt (metadata files) - */ - "/((?!_next/static|_next/image|favicon.ico|sitemap.xml|robots.txt).*)", - ], -}; -``` +On the frontend side, the SDK uses React Context to manage the authentication state of your users. To make that state available to all your pages, you need to override the Root Layout component and wrap the `` tag with a `UserProvider` in the file `app/layout.jsx`. -The `middleware` function intercepts incoming requests and applies Auth0's authentication logic. The `matcher` configuration ensures that the middleware runs on all routes except for static files and metadata. +Create the file `app/layout.jsx` as follows: -#### Auto-configured routes +```jsx +// app/layout.jsx +import { UserProvider } from '@auth0/nextjs-auth0/client'; -Using the SDK's middleware auto-configures the following routes: +export default function RootLayout({ children }) { + return ( + + + {children} + + + ); +} +``` -- `/auth/login`: The route to perform login with Auth0 -- `/auth/logout`: The route to log the user out -- `/auth/callback`: The route Auth0 will redirect the user to after a successful login -- `/auth/profile`: The route to fetch the user profile -- `/auth/access-token`: The route to verify the user's session and return an access token (which automatically refreshes if a refresh token is available) -- `/auth/backchannel-logout`: The route to receive a `logout_token` when a configured Back-Channel Logout initiator occurs +The authentication state exposed by `UserProvider` can be accessed in any Client Component using the `useUser()` hook. -:::note -The `/auth/access-token` route is enabled by default, but is only neccessary when the access token is needed on the client-side. If this isn't something you need, you can disable this endpoint by setting `enableAccessTokenEndpoint` to `false`. +:::panel Checkpoint +Now that you have added the dynamic route and `UserProvider`, run your application to verify that your application is not throwing any errors related to Auth0. ::: ## Add Login to Your Application -Users can now log in to your application at `/auth/login` route provided by the SDK. Use an **anchor tag** to add a link to the login route to redirect your users to the Auth0 Universal Login Page, where Auth0 can authenticate them. Upon successful authentication, Auth0 redirects your users back to your application. - -```html -Login -``` +Users can now log in to your application by visiting the `/api/auth/login` route provided by the SDK. Add a link that points to the login route using an **anchor tag**. Clicking it redirects your users to the Auth0 Universal Login Page, where Auth0 can authenticate them. Upon successful authentication, Auth0 will redirect your users back to your application. :::note -Next.js suggests using Link components instead of anchor tags, but since these are API routes and not pages, anchor tags are needed. +Next linting rules might suggest using the `Link` component instead of an anchor tag. The `Link` component is meant to perform client-side transitions between pages. As the link points to an API route and not to a page, you should keep it as an anchor tag. ::: +```html +Login +``` + :::panel Checkpoint -Add the login link to your application. Select it and verify that your Next.js application redirects you to the Auth0 Universal Login page and that you can now log in or sign up using a username and password or a social provider. +Add the login link to your application. When you click it, verify that your Next.js application redirects you to the Auth0 Universal Login page and that you can now log in or sign up using a username and password or a social provider. Once that's complete, verify that Auth0 redirects back to your application. - -If you are following along with the sample app project from the top of this page, run the command: - -```sh -npm i && npm run dev -``` -and visit http://localhost:3000 in your browser. ::: ![Auth0 Universal Login](/media/quickstarts/universal-login.png) @@ -158,14 +123,14 @@ and visit http://localhost:3000 in your browser. ## Add Logout to Your Application -Now that you can log in to your Next.js application, you need a way to log out. Add a link that points to the `/auth/logout` API route. To learn more, read Log Users out of Auth0 with OIDC Endpoint. +Now that you can log in to your Next.js application, you need a way to log out. Add a link that points to the `/api/auth/logout` API route. Clicking it redirects your users to your Auth0 logout endpoint (`https://YOUR_DOMAIN/v2/logout`) and then immediately redirects them back to your application. ```html -Logout +Logout ``` :::panel Checkpoint -Add the logout link to your application. When you select it, verify that your Next.js application redirects you to the address you specified as one of the "Allowed Logout URLs" in the application "Settings". +Add the logout link to your application. When you click it, verify that your Next.js application redirects you to the address you specified as one of the "Allowed Logout URLs" in the "Settings". ::: ## Show User Profile Information @@ -179,24 +144,22 @@ The profile information is available through the `user` property exposed by the ```jsx 'use client'; -export default function Profile() { - const { user, isLoading } = useUser(); +import { useUser } from '@auth0/nextjs-auth0/client'; + +export default function ProfileClient() { + const { user, error, isLoading } = useUser(); + + if (isLoading) return
Loading...
; + if (error) return
{error.message}
; + return ( - <> - {isLoading &&

Loading...

} - {user && ( -
- Profile -

{user.name}

-

{user.email}

-
{JSON.stringify(user, null, 2)}
-
- )} - + user && ( +
+ {user.name} +

{user.name}

+

{user.email}

+
+ ) ); } ``` @@ -212,19 +175,32 @@ The `user` property contains sensitive information and artifacts related to the The profile information is available through the `user` property exposed by the `getSession` function. Take this Server Component as an example of how to use it: ```jsx -import { auth0 } from "@/lib/auth0"; +import { getSession } from '@auth0/nextjs-auth0'; export default async function ProfileServer() { - const { user } = await auth0.getSession(); - return ( user && (
{user.name}/

{user.name}

{user.email}

) ); -} + const { user } = await getSession(); + return ( + user && ( +
+ {user.name} +

{user.name}

+

{user.email}

+
+ ) + ); +} ``` :::panel Checkpoint Verify that you can display the `user.name` or any other `user` property within a component correctly after you have logged in. -::: +::: ## What's next? -We put together a few examples on how to use nextjs-auth0 for more advanced use cases. +We put together a few examples of how to use nextjs-auth0 in more advanced use cases: + +- Protecting a Server Side Rendered (SSR) Page +- Protecting a Client Side Rendered (CSR) Page +- Protect an API Route +- Access an External API from an API Route diff --git a/articles/quickstart/webapp/nextjs/download.md b/articles/quickstart/webapp/nextjs/download.md index b80e4d475b..e1adb730a4 100644 --- a/articles/quickstart/webapp/nextjs/download.md +++ b/articles/quickstart/webapp/nextjs/download.md @@ -4,7 +4,7 @@ To run the sample follow these steps: 1) Set the **Allowed Callback URLs** in the Application Settings to ```text -http://localhost:3000/auth/callback +http://localhost:3000/api/auth/callback ``` 2) Set **Allowed Logout URLs** in the Application Settings to diff --git a/articles/quickstart/webapp/nextjs/files/.env.md b/articles/quickstart/webapp/nextjs/files/.env.md index 515f3b4950..e4de060766 100644 --- a/articles/quickstart/webapp/nextjs/files/.env.md +++ b/articles/quickstart/webapp/nextjs/files/.env.md @@ -6,7 +6,7 @@ language: ``` AUTH0_SECRET='use [openssl rand -hex 32] to generate a 32 bytes value' APP_BASE_URL='http://localhost:3000' -AUTH0_ISSUER_BASE_URL='https://${account.namespace}' +AUTH0_DOMAIN='https://${account.namespace}' AUTH0_CLIENT_ID='${account.clientId}' AUTH0_CLIENT_SECRET='${account.clientSecret}' ``` diff --git a/articles/quickstart/webapp/nextjs/index.yml b/articles/quickstart/webapp/nextjs/index.yml index 2fc7d9d1fc..ad6a5b3b9a 100644 --- a/articles/quickstart/webapp/nextjs/index.yml +++ b/articles/quickstart/webapp/nextjs/index.yml @@ -23,7 +23,7 @@ seo_alias: nextjs show_releases: true show_steps: true requirements: - - Next.js 15.2.4+ + - Next.js 13.4+ default_article: 01-login articles: - 01-login diff --git a/articles/quickstart/webapp/nextjs/interactive.md b/articles/quickstart/webapp/nextjs/interactive.md index 9ce73ba2a8..12be362c62 100644 --- a/articles/quickstart/webapp/nextjs/interactive.md +++ b/articles/quickstart/webapp/nextjs/interactive.md @@ -8,7 +8,7 @@ files: - files/src/middleware - files/src/app/page github: - path: https://github.com/auth0-samples/auth0-nextjs-samples/tree/main/Sample-01 + path: Sample-01 locale: en-US --- @@ -20,22 +20,17 @@ locale: en-US ## Configure Auth0 -

To use Auth0 services, you’ll need to have an application set up in the Auth0 Dashboard. The Auth0 application is where you will configure how you want authentication to work for the project you are developing.

Configure an application

Use the interactive selector to create a new Auth0 application or select an existing application that represents the project you want to integrate with. Every application in Auth0 is assigned an alphanumeric, unique client ID that your application code will use to call Auth0 APIs through the SDK.

Any settings you configure using this quickstart will automatically update for your Application in the Dashboard, which is where you can manage your Applications in the future.

If you would rather explore a complete configuration, you can view a sample application instead.

Configure Callback URLs

A callback URL is a URL in your application that you would like Auth0 to redirect users to after they have authenticated. If not set, users will not be returned to your application after they log in.

If you are following along with our sample project, set this to http://localhost:3000/auth/callback.

Configure Logout URLs

A logout URL is a URL in your application that you would like Auth0 to redirect users to after they have logged out. If not set, users will not be able to log out from your application and will receive an error.

If you are following along with our sample project, set this to http://localhost:3000.

+

To use Auth0 services, you’ll need to have an application set up in the Auth0 Dashboard. The Auth0 application is where you will configure how you want authentication to work for the project you are developing.

Configure an application

Use the interactive selector to create a new Auth0 application or select an existing application that represents the project you want to integrate with. Every application in Auth0 is assigned an alphanumeric, unique client ID that your application code will use to call Auth0 APIs through the SDK.

Any settings you configure using this quickstart will automatically update for your Application in the Dashboard, which is where you can manage your Applications in the future.

If you would rather explore a complete configuration, you can view a sample application instead.

Configure Callback URLs

A callback URL is a URL in your application that you would like Auth0 to redirect users to after they have authenticated. If not set, users will not be returned to your application after they log in.

If you are following along with our sample project, set this to http://localhost:3000/auth/callback.

Configure Logout URLs

A logout URL is a URL in your application that you would like Auth0 to redirect users to after they have logged out. If not set, users will not be able to log out from your application and will receive an error.

If you are following along with our sample project, set this to http://localhost:3000.

## Install the Auth0 Next.js v4 SDK -Run the following command within your project directory to install the Auth0 Next.js SDK: -```sh -npm i @auth0/nextjs-auth0 -``` - -The SDK exposes methods and variables that help you integrate Auth0 with your Next.js application using Route Handlers on the backend and React Context with React Hooks on the frontend. +

Run the following command within your project directory to install the Auth0 Next.js SDK:

npm i @auth0/nextjs-auth0

The SDK exposes methods and variables that help you integrate Auth0 with your Next.js application using Route Handlers on the backend and React Context with React Hooks on the frontend.

## Configure the SDK {{{ data-action="code" data-code=".env.local" }}} -

In the root directory of your project, add the file .env.local with the following environment variables:

  • AUTH0_SECRET: A long secret value used to encrypt the session cookie. You can generate a suitable string using openssl rand -hex 32 on the command line.

  • APP_BASE_URL: The base URL of your application.

  • AUTH0_ISSUER_BASE_URL: The URL of your Auth0 tenant domain. If you are using a Custom Domain with Auth0, set this to the value of your Custom Domain instead of the value reflected in the "Settings" tab.

  • AUTH0_CLIENT_ID: Your Auth0 application's Client ID.

  • AUTH0_CLIENT_SECRET: Your Auth0 application's Client Secret.

The SDK will read these values from the Node.js process environment and automatically configure itself.

+

In the root directory of your project, add the file .env.local with the following environment variables:

  • AUTH0_SECRET: A long secret value used to encrypt the session cookie. You can generate a suitable string using openssl rand -hex 32 on the command line.

  • APP_BASE_URL: The base URL of your application.

  • AUTH0_DOMAIN: The URL of your Auth0 tenant domain. If you are using a Custom Domain with Auth0, set this to the value of your Custom Domain instead of the value reflected in the "Settings" tab.

  • AUTH0_CLIENT_ID: Your Auth0 application's Client ID.

  • AUTH0_CLIENT_SECRET: Your Auth0 application's Client Secret.

The SDK will read these values from the Node.js process environment and automatically configure itself.

## Create the Auth0 SDK Client {{{ data-action="code" data-code="src/lib/auth0.ts" }}} @@ -55,10 +50,10 @@ The SDK exposes methods and variables that help you integrate Auth0 with your Ne ## Run Your Application -

Run this command to start your Next.js development server:

npm run dev

Visit the url http://localhost:3000 in your browser.

You will see:

  • A Sign up and Log in button if the user is not authenticated.

  • A welcome message and a Log out button if the user is authenticated.

Checkpoint

Run Your application.

  • Verify that your Next.js application redirects you to the Auth0 Universal Login page and that you can now log in or sign up using a username and password or a social provider.

  • Once that's complete, verify that Auth0 redirects back to your application.

+

Run this command to start your Next.js development server:

npm run dev

Visit the url http://localhost:3000 in your browser.

You will see:

  • A Sign up and Log in button if the user is not authenticated.

  • A welcome message and a Log out button if the user is authenticated.

Checkpoint

Run Your application.

  • Verify that your Next.js application redirects you to the Auth0 Universal Login page and that you can now log in or sign up using a username and password or a social provider.

  • Once that's complete, verify that Auth0 redirects back to your application.

-

Sorry about that. Here's a couple of things to double check:

  • are your environment variables populated correctly?

  • make sure that "Allowed Callback URLs" is configured correctly in your tenant

Still having issues? Check out our documentation or visit our community page to get more help.

+

Sorry about that. Here's a couple of things to double check:

  • are your environment variables populated correctly?

  • make sure that "Allowed Callback URLs" is configured correctly in your tenant

Still having issues? Check out our documentation or visit our community page to get more help.

diff --git a/articles/quickstart/webapp/nginx-plus/interactive.md b/articles/quickstart/webapp/nginx-plus/interactive.md index 85e6a01551..21f5b36f6e 100644 --- a/articles/quickstart/webapp/nginx-plus/interactive.md +++ b/articles/quickstart/webapp/nginx-plus/interactive.md @@ -7,8 +7,6 @@ files: - files/openid_connection_configuration - files/openid_connect - files/frontend -github: - path: https://github.com/nginxinc/nginx-openid-connect locale: en-US --- @@ -42,7 +40,7 @@ locale: en-US
-

Next, add your tenant’s logout URL to your openid_connect_configuration.conf file.

+

Next, add your tenant’s logout URL to your openid_connect_configuration.conf file.

## Configure Accept-Encoding header for token and JWKS endpoints {{{ data-action="code" data-code="openid_connect.server_conf" }}} diff --git a/articles/quickstart/webapp/php/interactive.md b/articles/quickstart/webapp/php/interactive.md index 7f4905f4b5..b24126c7d2 100644 --- a/articles/quickstart/webapp/php/interactive.md +++ b/articles/quickstart/webapp/php/interactive.md @@ -10,7 +10,7 @@ files: - files/router - files/callback github: - path: https://github.com/auth0-samples/auth0-php-web-app/tree/main/app + path: app locale: en-US --- @@ -22,12 +22,12 @@ locale: en-US ## Configure Auth0 -

To use Auth0 services, you’ll need to have an application set up in the Auth0 Dashboard. The Auth0 application is where you will configure how you want authentication to work for the project you are developing.

Configure an application

Use the interactive selector to create a new Auth0 application or select an existing application that represents the project you want to integrate with. Every application in Auth0 is assigned an alphanumeric, unique client ID that your application code will use to call Auth0 APIs through the SDK.

Any settings you configure using this quickstart will automatically update for your Application in the Dashboard, which is where you can manage your Applications in the future.

If you would rather explore a complete configuration, you can view a sample application instead.

Configure Callback URLs

A callback URL is a URL in your application that you would like Auth0 to redirect users to after they have authenticated. If not set, users will not be returned to your application after they log in.

If you are following along with our sample project, set this to http://localhost:3000/callback.

Configure Logout URLs

A logout URL is a URL in your application that you would like Auth0 to redirect users to after they have logged out. If not set, users will not be able to log out from your application and will receive an error.

If you are following along with our sample project, set this to http://localhost:3000.

Configure Allowed Web Origins

An Allowed Web Origin is a URL that you want to be allowed to access to your authentication flow. This must contain the URL of your project. If not properly set, your project will be unable to silently refresh authentication tokens, so your users will be logged out the next time they visit your application or refresh a page.

If you are following along with our sample project, set this to http://localhost:3000.

+

To use Auth0 services, you’ll need to have an application set up in the Auth0 Dashboard. The Auth0 application is where you will configure how you want authentication to work for the project you are developing.

Configure an application

Use the interactive selector to create a new Auth0 application or select an existing application that represents the project you want to integrate with. Every application in Auth0 is assigned an alphanumeric, unique client ID that your application code will use to call Auth0 APIs through the SDK.

Any settings you configure using this quickstart will automatically update for your Application in the Dashboard, which is where you can manage your Applications in the future.

If you would rather explore a complete configuration, you can view a sample application instead.

Configure Callback URLs

A callback URL is a URL in your application that you would like Auth0 to redirect users to after they have authenticated. If not set, users will not be returned to your application after they log in.

If you are following along with our sample project, set this to http://localhost:3000/callback.

Configure Logout URLs

A logout URL is a URL in your application that you would like Auth0 to redirect users to after they have logged out. If not set, users will not be able to log out from your application and will receive an error.

If you are following along with our sample project, set this to http://localhost:3000.

Configure Allowed Web Origins

An Allowed Web Origin is a URL that you want to be allowed to access to your authentication flow. This must contain the URL of your project. If not properly set, your project will be unable to silently refresh authentication tokens, so your users will be logged out the next time they visit your application or refresh a page.

If you are following along with our sample project, set this to http://localhost:3000.

## Install the Auth0 PHP SDK {{{ data-action="code" data-code="index.php" }}} -

Auth0 provides a PHP SDK (Auth0-PHP) to simplify the process of implementing Auth0 authentication and authorization in PHP apps.

The Auth0 PHP SDK requires PSR-17 and PSR-18 compatible HTTP libraries to be installed for managing network requests. If you don't have libraries available, you can install reliable choices by running the following commands in your terminal:

cd <your-project-directory>
+

Auth0 provides a PHP SDK (Auth0-PHP) to simplify the process of implementing Auth0 authentication and authorization in PHP apps.

The Auth0 PHP SDK requires PSR-17 and PSR-18 compatible HTTP libraries to be installed for managing network requests. If you don't have libraries available, you can install reliable choices by running the following commands in your terminal:

cd <your-project-directory>
 
 composer require symfony/http-client nyholm/psr7
 
@@ -37,7 +37,7 @@ composer require symfony/http-client nyholm/psr7
 
 
-

Configure the Auth0 SDK

Create a new file in your application called index.php, and copy in the code from the interactive panel to the right under the index.php tab.

For the SDK to function properly, you must set the following properties in the Auth0 SDK during initialization:

  • domain: The domain of your Auth0 tenant. Generally, you can find this in the Auth0 Dashboard under your Application's Settings in the Domain field. If you are using a custom domain, you should set this to the value of your custom domain instead.

  • clientId: The ID of the Auth0 Application you set up earlier in this quickstart. You can find this in the Auth0 Dashboard under your Application's Settings in the Client ID field.

  • clientSecret: The secret of the Auth0 Application you set up earlier in this quickstart. You can find this in the Auth0 Dashboard under your Application's Settings in the Client Secret field.

  • redirectUri: The URL in your application that you would like Auth0 to redirect users to after they have authenticated. This corresponds to the callback URL you set up earlier in this quickstart. You can also find this value in the Auth0 Dashboard under your Application's Settings in the Callback URLs field. Make sure what you enter in your code matches what you set up earlier or your users will see an error.

  • cookieSecret: A long secret value used to encrypt the session cookie. You can generate a suitable string by running openssl rand -hex 32 in your terminal.

PHP Step 2 Checkpoint

Your Auth0 SDK should now be properly configured. Run your application to verify that:

  • The SDK is initializing correctly.

  • Your application is not throwing any errors related to Auth0.

+

Configure the Auth0 SDK

Create a new file in your application called index.php, and copy in the code from the interactive panel to the right under the index.php tab.

For the SDK to function properly, you must set the following properties in the Auth0 SDK during initialization:

  • domain: The domain of your Auth0 tenant. Generally, you can find this in the Auth0 Dashboard under your Application's Settings in the Domain field. If you are using a custom domain, you should set this to the value of your custom domain instead.

  • clientId: The ID of the Auth0 Application you set up earlier in this quickstart. You can find this in the Auth0 Dashboard under your Application's Settings in the Client ID field.

  • clientSecret: The secret of the Auth0 Application you set up earlier in this quickstart. You can find this in the Auth0 Dashboard under your Application's Settings in the Client Secret field.

  • redirectUri: The URL in your application that you would like Auth0 to redirect users to after they have authenticated. This corresponds to the callback URL you set up earlier in this quickstart. You can also find this value in the Auth0 Dashboard under your Application's Settings in the Callback URLs field. Make sure what you enter in your code matches what you set up earlier or your users will see an error.

  • cookieSecret: A long secret value used to encrypt the session cookie. You can generate a suitable string by running openssl rand -hex 32 in your terminal.

PHP Step 2 Checkpoint

Your Auth0 SDK should now be properly configured. Run your application to verify that:

  • The SDK is initializing correctly.

  • Your application is not throwing any errors related to Auth0.

@@ -61,28 +61,28 @@ composer require symfony/http-client nyholm/psr7
-

Sorry about that. Here's a couple things to double check:

  • You configured the correct redirectUri.

Still having issues? Check out our documentation or visit our community page to get more help.

+

Sorry about that. Here's a couple things to double check:

  • You configured the correct redirectUri.

Still having issues? Check out our documentation or visit our community page to get more help.

## Add logout to your application {{{ data-action="code" data-code="logout.php" }}} -

Users who log in to your project will also need a way to log out. We will handle a logout button using the SDK’s logout() method. When users log out, they will be redirected to your Auth0 logout endpoint, which will then immediately redirect them to the logout URL you set up earlier in this quickstart.

Create a new file in your application called logout.php for handling the process, and copy in the code from the interactive panel, which contains the logic needed for logout. Then, update your index.php file to include the logout button.

PHP Section 5 Checkpoint

Run your application and click the logout button, verify that:

  • Your application redirects you to the address you specified as one of the Allowed Logout URLs in your Application Settings.

  • You are no longer logged in to your application.

+

Users who log in to your project will also need a way to log out. We will handle a logout button using the SDK’s logout() method. When users log out, they will be redirected to your Auth0 logout endpoint, which will then immediately redirect them to the logout URL you set up earlier in this quickstart.

Create a new file in your application called logout.php for handling the process, and copy in the code from the interactive panel, which contains the logic needed for logout. Then, update your index.php file to include the logout button.

PHP Section 5 Checkpoint

Run your application and click the logout button, verify that:

  • Your application redirects you to the address you specified as one of the Allowed Logout URLs in your Application Settings.

  • You are no longer logged in to your application.

-

Sorry about that. Here's a couple things to double check:

  • You configured the correct Logout URL.

Still having issues? Check out our documentation or visit our community page to get more help.

+

Sorry about that. Here's a couple things to double check:

  • You configured the correct Logout URL.

Still having issues? Check out our documentation or visit our community page to get more help.

## Show User Profile Information {{{ data-action="code" data-code="profile.php" }}} -

Now that your users can log in and log out, you will likely want to be able to retrieve the profile information associated with authenticated users. For example, you may want to be able to display a logged-in user’s name or profile picture in your project.

The Auth0 PHP SDK provides user information through the getCredentials() method. Review the profile.php code in the interactive panel to see an example of how to use it.

Because the method contains sensitive information related to the user's identity, its availability depends on the user's authentication status. To prevent render errors, you should always check if the getCredentials() method returns an object or null to determine whether Auth0 has authenticated the user before your application consumes the results.

Php section 6 Checkpoint

Verify that:

  • You can display the nickname or any other user property correctly after you have logged in.

+

Now that your users can log in and log out, you will likely want to be able to retrieve the profile information associated with authenticated users. For example, you may want to be able to display a logged-in user’s name or profile picture in your project.

The Auth0 PHP SDK provides user information through the getCredentials() method. Review the profile.php code in the interactive panel to see an example of how to use it.

Because the method contains sensitive information related to the user's identity, its availability depends on the user's authentication status. To prevent render errors, you should always check if the getCredentials() method returns an object or null to determine whether Auth0 has authenticated the user before your application consumes the results.

Php section 6 Checkpoint

Verify that:

  • You can display the nickname or any other user property correctly after you have logged in.

-

Sorry about that. Here's a couple things to double check:

  • You created the profile.php file and are logged in.

Still having issues? Check out our documentation or visit our community page to get more help.

+

Sorry about that. Here's a couple things to double check:

  • You created the profile.php file and are logged in.

Still having issues? Check out our documentation or visit our community page to get more help.

diff --git a/articles/quickstart/webapp/python/interactive.md b/articles/quickstart/webapp/python/interactive.md index 546b91f9d5..f4718d9568 100644 --- a/articles/quickstart/webapp/python/interactive.md +++ b/articles/quickstart/webapp/python/interactive.md @@ -6,19 +6,19 @@ files: - files/server - files/templates/home github: - path: https://github.com/auth0-samples/auth0-python-web-app/tree/master/01-Login + path: 01-Login locale: en-US --- # Add Login to Your Python Flask Application -

Auth0 allows you to add authentication and gain access to user profile information in your application. This guide demonstrates how to integrate Auth0 with a Python Flask application using the Authlib SDK.

+

Auth0 allows you to add authentication and gain access to user profile information in your application. This guide demonstrates how to integrate Auth0 with a Python Flask application using the Authlib SDK.

## Configure Auth0 -

To use Auth0 services, you’ll need to have an application set up in the Auth0 Dashboard. The Auth0 application is where you will configure how you want authentication to work for the project you are developing.

Configure an application

Use the interactive selector to create a new Auth0 application or select an existing application that represents the project you want to integrate with. Every application in Auth0 is assigned an alphanumeric, unique client ID that your application code will use to call Auth0 APIs through the SDK.

Any settings you configure using this quickstart will automatically update for your Application in the Dashboard, which is where you can manage your Applications in the future.

If you would rather explore a complete configuration, you can view a sample application instead.

Configure Callback URLs

A callback URL is a URL in your application that you would like Auth0 to redirect users to after they have authenticated. If not set, users will not be returned to your application after they log in.

If you are following along with our sample project, set this to http://localhost:3000/callback.

Configure Logout URLs

A logout URL is a URL in your application that you would like Auth0 to redirect users to after they have logged out. If not set, users will not be able to log out from your application and will receive an error.

If you are following along with our sample project, set this to http://localhost:3000.

+

To use Auth0 services, you’ll need to have an application set up in the Auth0 Dashboard. The Auth0 application is where you will configure how you want authentication to work for the project you are developing.

Configure an application

Use the interactive selector to create a new Auth0 application or select an existing application that represents the project you want to integrate with. Every application in Auth0 is assigned an alphanumeric, unique client ID that your application code will use to call Auth0 APIs through the SDK.

Any settings you configure using this quickstart will automatically update for your Application in the Dashboard, which is where you can manage your Applications in the future.

If you would rather explore a complete configuration, you can view a sample application instead.

Configure Callback URLs

A callback URL is a URL in your application that you would like Auth0 to redirect users to after they have authenticated. If not set, users will not be returned to your application after they log in.

If you are following along with our sample project, set this to http://localhost:3000/callback.

Configure Logout URLs

A logout URL is a URL in your application that you would like Auth0 to redirect users to after they have logged out. If not set, users will not be able to log out from your application and will receive an error.

If you are following along with our sample project, set this to http://localhost:3000.

## Install dependencies @@ -65,7 +65,7 @@ APP_SECRET_KEY= ## Setup your application {{{ data-action="code" data-code="templates/home.html" }}} -

Next, set up your application. Create a server.py file in your project directory - this file will contain your application logic.

Import all the libraries your application needs.

Load the configuration .env file you made in the previous step.

Configure Authlib to handle your application's authentication with Auth0. To learn more about the configuration options available for Authlib's OAuth register() method from their documentation.

+

Next, set up your application. Create a server.py file in your project directory - this file will contain your application logic.

Import all the libraries your application needs.

Load the configuration .env file you made in the previous step.

Configure Authlib to handle your application's authentication with Auth0. To learn more about the configuration options available for Authlib's OAuth register() method from their documentation.

## Setup your routes {{{ data-action="code" data-code="server.py" }}} @@ -84,10 +84,10 @@ APP_SECRET_KEY=
-

Python Step 7 Checkpoint

Visit http://localhost:3000 to verify. You should find a login button routing to Auth0 for login, then back to your application to see your profile information.

+

Python Step 7 Checkpoint

Visit http://localhost:3000 to verify. You should find a login button routing to Auth0 for login, then back to your application to see your profile information.

-

If your application did not start successfully:

  • Verify any errors in the console.

  • Verify the domain and Client ID imported correctly.

  • Verify your tenant configuration.

Still having issues? Check out our documentation or visit our community page to get more help

+

If your application did not start successfully:

  • Verify any errors in the console.

  • Verify the domain and Client ID imported correctly.

  • Verify your tenant configuration.

Still having issues? Check out our documentation or visit our community page to get more help

diff --git a/articles/quickstart/webapp/rails/interactive.md b/articles/quickstart/webapp/rails/interactive.md index 680d7f6677..9e73fd88ea 100644 --- a/articles/quickstart/webapp/rails/interactive.md +++ b/articles/quickstart/webapp/rails/interactive.md @@ -9,7 +9,7 @@ files: - files/routes - files/secured github: - path: https://github.com/auth0-samples/auth0-rubyonrails-sample/tree/master/sample + path: sample locale: en-US --- @@ -21,12 +21,12 @@ locale: en-US ## Configure Auth0 -

To use Auth0 services, you’ll need to have an application set up in the Auth0 Dashboard. The Auth0 application is where you will configure how you want authentication to work for the project you are developing.

Configure an application

Use the interactive selector to create a new Auth0 application or select an existing application that represents the project you want to integrate with. Every application in Auth0 is assigned an alphanumeric, unique client ID that your application code will use to call Auth0 APIs through the SDK.

Any settings you configure using this quickstart will automatically update for your Application in the Dashboard, which is where you can manage your Applications in the future.

If you would rather explore a complete configuration, you can view a sample application instead.

Configure Callback URLs

A callback URL is a URL in your application that you would like Auth0 to redirect users to after they have authenticated. If not set, users will not be returned to your application after they log in.

If you are following along with our sample project, set this to http://localhost:3000/auth/auth0/callback.

Configure Logout URLs

A logout URL is a URL in your application that you would like Auth0 to redirect users to after they have logged out. If not set, users will not be able to log out from your application and will receive an error.

If you are following along with our sample project, set this to http://localhost:3000.

Configure Allowed Web Origins

An Allowed Web Origin is a URL that you want to be allowed to access to your authentication flow. This must contain the URL of your project. If not properly set, your project will be unable to silently refresh authentication tokens, so your users will be logged out the next time they visit your application or refresh a page.

If you are following along with our sample project, set this to http://localhost:3000.

+

To use Auth0 services, you’ll need to have an application set up in the Auth0 Dashboard. The Auth0 application is where you will configure how you want authentication to work for the project you are developing.

Configure an application

Use the interactive selector to create a new Auth0 application or select an existing application that represents the project you want to integrate with. Every application in Auth0 is assigned an alphanumeric, unique client ID that your application code will use to call Auth0 APIs through the SDK.

Any settings you configure using this quickstart will automatically update for your Application in the Dashboard, which is where you can manage your Applications in the future.

If you would rather explore a complete configuration, you can view a sample application instead.

Configure Callback URLs

A callback URL is a URL in your application that you would like Auth0 to redirect users to after they have authenticated. If not set, users will not be returned to your application after they log in.

If you are following along with our sample project, set this to http://localhost:3000/auth/auth0/callback.

Configure Logout URLs

A logout URL is a URL in your application that you would like Auth0 to redirect users to after they have logged out. If not set, users will not be able to log out from your application and will receive an error.

If you are following along with our sample project, set this to http://localhost:3000.

Configure Allowed Web Origins

An Allowed Web Origin is a URL that you want to be allowed to access to your authentication flow. This must contain the URL of your project. If not properly set, your project will be unable to silently refresh authentication tokens, so your users will be logged out the next time they visit your application or refresh a page.

If you are following along with our sample project, set this to http://localhost:3000.

## Add dependencies -

Use omniauth-auth0, a custom OmniAuth strategy, to handle the authentication flow.

Add the following dependencies to your Gemfile:

gem 'omniauth-auth0', '~> 3.0'
+

Use omniauth-auth0, a custom OmniAuth strategy, to handle the authentication flow.

Add the following dependencies to your Gemfile:

gem 'omniauth-auth0', '~> 3.0'
 
 gem 'omniauth-rails_csrf_protection', '~> 1.0' # prevents forged authentication requests
 
@@ -42,12 +42,12 @@ gem 'omniauth-rails_csrf_protection', '~> 1.0' # prevents forged authenticati
 ## Configure the OmniAuth middleware {{{ data-action="code" data-code="auth0.rb" }}}
 
 
-

Create the following initializer file ./config/initializers/auth0.rb and configure the OmniAuth middleware with the configuration file you created in the previous step.

Ensure that callback_path matches the value given in the "Allowed Callback URLs" setting in your Auth0 application.

+

Create the following initializer file ./config/initializers/auth0.rb and configure the OmniAuth middleware with the configuration file you created in the previous step.

Ensure that callback_path matches the value given in the "Allowed Callback URLs" setting in your Auth0 application.

## Add an Auth0 controller {{{ data-action="code" data-code="auth0_controller.rb" }}} -

Create an Auth0 controller to handle the authentication callback, logout action, and methods for constructing the logout URL.

Run the command: rails generate controller auth0 callback failure logout --skip-assets --skip-helper --skip-routes --skip-template-engine.

Inside the callback method, assign the hash of user information - returned as request.env['omniauth.auth'] - to the active session.

To configure logout, clear all the objects stored within the session by calling the reset_session method within the logout action. Then, redirect to the Auth0 logout endpoint. To learn more about reset_session, read Ruby on Rails ActionController documentation.

+

Create an Auth0 controller to handle the authentication callback, logout action, and methods for constructing the logout URL.

Run the command: rails generate controller auth0 callback failure logout --skip-assets --skip-helper --skip-routes --skip-template-engine.

Inside the callback method, assign the hash of user information - returned as request.env['omniauth.auth'] - to the active session.

To configure logout, clear all the objects stored within the session by calling the reset_session method within the logout action. Then, redirect to the Auth0 logout endpoint. To learn more about reset_session, read Ruby on Rails ActionController documentation.

## Configure routes {{{ data-action="code" data-code="routes.rb" }}} @@ -56,14 +56,14 @@ gem 'omniauth-rails_csrf_protection', '~> 1.0' # prevents forged authenticati
-

Sorry about that. Please double-check that the previous steps completed without error.

Still having issues? Check out our documentation or visit our community page to get more help.

+

Sorry about that. Please double-check that the previous steps completed without error.

Still having issues? Check out our documentation or visit our community page to get more help.

## Add login to your application -

A user can now log into your application by visiting the /auth/auth0 endpoint.

To prevent forged authentication requests, use the link_to or button_to helper methods with the :post method.

<!-- Place a login button anywhere on your application -->
+

A user can now log into your application by visiting the /auth/auth0 endpoint.

To prevent forged authentication requests, use the link_to or button_to helper methods with the :post method.

<!-- Place a login button anywhere on your application -->
 
 \${ "<\%= button_to 'Login', '/auth/auth0', method: :post %>" }
 
@@ -73,7 +73,7 @@ gem 'omniauth-rails_csrf_protection', '~> 1.0' # prevents forged authenticati
 
   
-

Sorry about that. Here are a couple of things you can check:

  • Ensure that the correct URLs have been set in your Auth0 application as per the first step in this quickstart

  • Check that all the required gems installed correctly

  • Check that the routes have been set up and the Auth0 configuration has been set up in your app

  • Check the logs for any other errors or messages that may have prevented login from working

Still having issues? Check out our documentation or visit our community page to get more help.

+

Sorry about that. Here are a couple of things you can check:

  • Ensure that the correct URLs have been set in your Auth0 application as per the first step in this quickstart

  • Check that all the required gems installed correctly

  • Check that the routes have been set up and the Auth0 configuration has been set up in your app

  • Check the logs for any other errors or messages that may have prevented login from working

Still having issues? Check out our documentation or visit our community page to get more help.

@@ -90,15 +90,14 @@ gem 'omniauth-rails_csrf_protection', '~> 1.0' # prevents forged authenticati
-

Sorry about that. Here are a couple of things you can check:

  • Ensure that the correct URLs have been set in your Auth0 client as per the first step in this quickstart

  • Check that the routes have been set up and the Auth0 configuration has been set up in your app

  • Check the logs for any other errors or messages that may have prevented login from working

Still having issues? Check out our documentation or visit our community page to get more help.

+

Sorry about that. Here are a couple of things you can check:

  • Ensure that the correct URLs have been set in your Auth0 client as per the first step in this quickstart

  • Check that the routes have been set up and the Auth0 configuration has been set up in your app

  • Check the logs for any other errors or messages that may have prevented login from working

Still having issues? Check out our documentation or visit our community page to get more help.

## Show user profile information {{{ data-action="code" data-code="routes.rb" }}} -To display the user's profile, your application should provide a protected route. You can use a Concern to control access to routes that can be shared across multiple controllers. The concern should automatically redirect to Auth0 when the user is unauthenticated. Otherwise, the concern should return the current user profile. -

To display the user's profile, your application should provide a protected route. You can use a Concern to control access to routes that can be shared across multiple controllers. The concern should automatically redirect to Auth0 when the user is unauthenticated. Otherwise, the concern should return the current user profile.

Once you have a Concern, include it in any controller that requires a logged-in user. You can then access the user from the session session[:userinfo] as in the following example:

class DashboardController < ApplicationController
+

To display the user's profile, your application should provide a protected route. You can use a Concern to control access to routes that can be shared across multiple controllers. The concern should automatically redirect to Auth0 when the user is unauthenticated. Otherwise, the concern should return the current user profile.

Once you have a Concern, include it in any controller that requires a logged-in user. You can then access the user from the session session[:userinfo] as in the following example:

class DashboardController < ApplicationController
 
   include Secured
 
diff --git a/fr-ca/articles/quickstart/backend/acul/interactive.md b/fr-ca/articles/quickstart/backend/acul/interactive.md
index 4fb2d96313..cae5bcb1fd 100644
--- a/fr-ca/articles/quickstart/backend/acul/interactive.md
+++ b/fr-ca/articles/quickstart/backend/acul/interactive.md
@@ -7,7 +7,7 @@ files:
  - files/auth_config
  - files/index
 github:
-  path: https://github.com/auth0-samples/auth0-react-samples/tree/master/Sample-01
+  path: Sample-01
 locale: fr-CA
 ---
 
@@ -19,12 +19,12 @@ locale: fr-CA
 ## Configure Auth0
 
 
-

To use Auth0 services, you’ll need to have an application set up in the Auth0 Dashboard. The Auth0 application is where you will configure how you want authentication to work for the project you are developing.

Configure an application

Use the interactive selector to create a new Auth0 application or select an existing application that represents the project you want to integrate with. Every application in Auth0 is assigned an alphanumeric, unique client ID that your application code will use to call Auth0 APIs through the SDK.

Any settings you configure using this quickstart will automatically update for your Application in the Dashboard, which is where you can manage your Applications in the future.

If you would rather explore a complete configuration, you can view a sample application instead.

Configure Callback URLs

A callback URL is a URL in your application that you would like Auth0 to redirect users to after they have authenticated. If not set, users will not be returned to your application after they log in.

Si vous suivez notre exemple de projet, définissez cette URL comme suit : http://localhost:3000.

Configure Logout URLs

A logout URL is a URL in your application that you would like Auth0 to redirect users to after they have logged out. If not set, users will not be able to log out from your application and will receive an error.

Si vous suivez notre exemple de projet, définissez cette URL comme suit : http://localhost:3000.

Configure Allowed Web Origins

An Allowed Web Origin is a URL that you want to be allowed to access to your authentication flow. This must contain the URL of your project. If not properly set, your project will be unable to silently refresh authentication tokens, so your users will be logged out the next time they visit your application or refresh a page.

Si vous suivez notre exemple de projet, définissez cette URL comme suit : http://localhost:3000.

+

To use Auth0 services, you’ll need to have an application set up in the Auth0 Dashboard. The Auth0 application is where you will configure how you want authentication to work for the project you are developing.

Configure an application

Use the interactive selector to create a new Auth0 application or select an existing application that represents the project you want to integrate with. Every application in Auth0 is assigned an alphanumeric, unique client ID that your application code will use to call Auth0 APIs through the SDK.

Any settings you configure using this quickstart will automatically update for your Application in the Dashboard, which is where you can manage your Applications in the future.

If you would rather explore a complete configuration, you can view a sample application instead.

Configure Callback URLs

A callback URL is a URL in your application that you would like Auth0 to redirect users to after they have authenticated. If not set, users will not be returned to your application after they log in.

Si vous suivez notre exemple de projet, définissez cette URL comme suit : http://localhost:3000.

Configure Logout URLs

A logout URL is a URL in your application that you would like Auth0 to redirect users to after they have logged out. If not set, users will not be able to log out from your application and will receive an error.

Si vous suivez notre exemple de projet, définissez cette URL comme suit : http://localhost:3000.

Configure Allowed Web Origins

An Allowed Web Origin is a URL that you want to be allowed to access to your authentication flow. This must contain the URL of your project. If not properly set, your project will be unable to silently refresh authentication tokens, so your users will be logged out the next time they visit your application or refresh a page.

Si vous suivez notre exemple de projet, définissez cette URL comme suit : http://localhost:3000.

## Configure ACUL for Login ID screen {{{ data-action="code" data-code="settings.json" }}} -

Use Auth0 CLI to enable ACLU Login ID screen in your tenant. +

Use Auth0 CLI to enable ACLU Login ID screen in your tenant. @@ -55,11 +55,11 @@ npm install

-

ACUL Login ID screen Step 2 - Checkpoint
  1. Open your application (default: http://localhost:3000)

  2. Select the Log In button on the sample app

  3. You should be redirected to your Auth0 domain

After selecting Log In, you should see a blank page.

This is expected! It means Auth0 is trying to load your custom UI assets, which we have not created yet.

+

Étape 2 : Point de contrôle – Écran d’identification de connexion ACUL
  1. Ouvrez votre application (par défaut : http://localhost:3000)

  2. Sélectionnez le bouton Log In (Connexion) sur l’exemple d’application

  3. Vous devriez être redirigé vers votre domaine Auth0

Connectez-vous, vous devriez voir une page blanche.

C’est normal! Cela signifie qu’Auth0 tente de charger vos ressources d’interface utilisateur personnalisées, que nous n’avons pas encore créées.

-

If you see the default Auth0 page instead of a blank page:

  1. Check if your custom domain is properly configured.

  2. Ensure your application is using the custom domain.

+

Si vous voyez la page Auth0 par défaut au lieu d’une page vierge :

  1. Vérifiez si votre domaine personnalisé est correctement configuré.

  2. Assurez-vous que votre application utilise le domaine personnalisé.

@@ -76,7 +76,7 @@ npm install
-

2. Change directory to the auth0-acul-react-boilerplate folder and install the application and the ACUL JS SDK.

// open the directory where you git clone the boilerplate
+

2. Change directory to the auth0-acul-react-boilerplate folder and install the application and the ACUL JS SDK.

// open the directory where you git clone the boilerplate
 
 cd auth0-acul-react-boilerplate && npm i
 
@@ -96,17 +96,17 @@ npm install @auth0/auth0-acul-js
 
 
-

The assets are served from localhost during development.

For production, you'll need to serve these assets from a CDN or static hosting service.

ACUL Login ID screen quickstart step 4 checkpoint

After selecting Log In, you are greeted with a “Hello World” page.

+

The assets are served from localhost during development.

For production, you'll need to serve these assets from a CDN or static hosting service.

Démarrage rapide – Étape 4 : Point de contrôle – Écran d’identification de connexion ACUL

Après avoir sélectionné Log In (Connexion), vous êtes accueilli par une page « Bonjour tout le monde ».

-

Make sure to have installed the ACUL JS SDK after installing the boilerplate application.

+

Assurez-vous d’avoir installé la trousse SDK ACUL JS après avoir installé l’application standard.

Build the ACUL Login ID screen

Change directory to the auth0-acul-react-boilerplate/src/screens/loginId/ and edit the index.tsx file.

Rebuild the application with the following command:

npm run build
 
 
-

ACUL Login ID screen quickstart step 4 rebuild the app checkpoint

Select Log In.

You should now see a customized login page as shown below:

+

Démarrage rapide – Étape 4 : Point de contrôle Recréer l’application – Écran d’identification de connexion ACUL

Sélectionnez Log In (Connexion).

Vous devriez maintenant voir une page de connexion personnalisée semblable à celle-ci :

diff --git a/fr-ca/articles/quickstart/backend/aspnet-core-webapi/interactive.md b/fr-ca/articles/quickstart/backend/aspnet-core-webapi/interactive.md index 481e4a0979..30c22c3878 100644 --- a/fr-ca/articles/quickstart/backend/aspnet-core-webapi/interactive.md +++ b/fr-ca/articles/quickstart/backend/aspnet-core-webapi/interactive.md @@ -1,6 +1,6 @@ --- title: Ajouter une autorisation à votre application API ASP.NET Core Web -description: Ce tutoriel explique comment ajouter une autorisation à une application API ASP.NET Core Web en utilisant le logiciel médiateur JWT standard. +description: Ce tutoriel explique comment ajouter une autorisation à une application API ASP.NET Core Web en utilisant le logiciel médiateur JWT standard. interactive: true files: - files/appsettings @@ -9,21 +9,21 @@ files: - files/HasScopeRequirement - files/ApiController github: - path: https://github.com/auth0-samples/auth0-aspnetcore-webapi-samples/tree/master/Quickstart/01-Authorization + path: Quickstart/01-Authorization locale: fr-CA --- # Ajouter une autorisation à votre application API ASP.NET Core Web -

Auth0 vous permet d’ajouter rapidement l’authentification et d’accéder aux informations relatives au profil de l’utilisateur dans presque tous les types d’applications. Ce guide explique comment intégrer Auth0 à n’importe quelle application API ASP.NET Web, nouvelle ou ancienne, à l’aide du package Microsoft.AspNetCore.Authentication.JwtBearer.

Si vous n'avez pas encore créé d’API dans votre tableau Auth0 dashboard, vous pouvez utiliser le sélecteur interactif pour créer une nouvelle API Auth0 ou sélectionner une API existante qui représente le projet avec lequel vous souhaitez vous intégrer.

Vous pouvez également lire notre guide de démarrage, qui vous aidera à configurer votre première API via Auth0 Dashboard.

Notez que chaque API dans Auth0 est configurée à l’aide d’un identifiant d’API; votre code d’application utilisera l’identifiant d’API comme Audience pour valider le jeton d’accès.

Vous ne connaissez pas Auth0 ? Découvrez Auth0 et l’implémentation de l’authentification et de l’autorisation d’API en utilisant le cadre d'applications OAuth 2.0.

+

Auth0 vous permet d’ajouter rapidement l’authentification et d’accéder aux informations relatives au profil de l’utilisateur dans presque tous les types d’applications. Ce guide explique comment intégrer Auth0 à n’importe quelle application API ASP.NET Web, nouvelle ou existante, à l’aide du package Microsoft.AspNetCore.Authentication.JwtBearer .

Si vous n’avez pas encore créé d’API dans votre Auth0 Dashboard, vous pouvez utiliser le sélecteur interactif pour créer une nouvelle API Auth0 ou sélectionner une API existante qui représente le projet avec lequel vous souhaitez effectuer l’intégration.

Vous pouvez également consulter notre guide de démarrage, qui vous aidera à configurer votre première API via Auth0 Dashboard.

Notez que chaque API dans Auth0 est configurée à l’aide d’un identifiant d’API; votre code d’application utilisera l’identifiant d’API comme Public pour valider le jeton d’accès.

Vous ne connaissez pas Auth0 ? Découvrez Auth0 et l’implémentation de l’authentification et de l’autorisation d’API en utilisant le cadre d’applications OAuth 2.0.

## Définir les autorisations -

Les autorisations vous permettent de définir comment les ressources peuvent être accessibles au nom de l’utilisateur avec un jeton d’accès donné. Par exemple, vous pouvez choisir d’accorder un accès en lecture à la ressource messages si les utilisateurs ont le niveau d’accès gestionnaire et accorder un accès en écriture à cette ressource s’ils ont le niveau d’accès administrateur.

Vous pouvez définir les autorisations autorisées dans la vue Permissions (Autorisations) de la section API du Auth0 Dashboard. L’exemple suivant utilise la permission read:messages.

Auth0 Dashboard> Applications > APIs (API) > [Specific API (API précise)] > Onglet Permissions (Autorisations)

+

Les autorisations vous permettent de définir comment les ressources peuvent être accessibles au nom de l’utilisateur avec un jeton d’accès donné. Par exemple, vous pouvez choisir d’accorder un accès en lecture à la ressource messages si les utilisateurs ont le niveau d’accès gestionnaire et accorder un accès en écriture à cette ressource s’ils ont le niveau d’accès administrateur.

Vous pouvez définir les autorisations autorisées dans la vue Permissions (Autorisations) de la section API d’Auth0 Dashboard. L’exemple suivant utilise la permission read:messages.

Auth0 Dashboard> Applications > APIs (API) > [Specific API (API précise)] > Onglet Permissions (Autorisations)

-## Installer des dépendances +## Installer les dépendances

Pour permettre à votre application de valider les jetons d’accès, ajoutez une référence au package NuGet Microsoft.AspNetCore.Authentication.JwtBearer :

Install-Package Microsoft.AspNetCore.Authentication.JwtBearer
@@ -35,44 +35,44 @@ locale: fr-CA
 ## Configurer le logiciel médiateur {{{ data-action="code" data-code="Program.cs" }}}
 
 
-

Configurer le logiciel médiateur d’authentification en le configurant dans le fichier Program.cs de votre application :

  1. Enregistrez les services d’authentification en appelant la méthode AddAuthentication. Configurez JwtBearerDefaults.AuthenticationScheme comme schéma par défaut.

  2. Enregistrez le schéma d’authentification du porteur JWT en faisant un appel à la méthode AddJwtBearer. Configurez votre domaine Auth0 comme autorité et votre identifiant API Auth0 comme public, et assurez-vous que votre domaine Auth0 et votre identifiant API sont définis dans le fichier appsettings.json de votre application. +

    Configurez le logiciel médiateur d’authentification dans le fichier Program.cs de votre application :

    1. Enregistrez les services d’authentification en appelant la méthode AddAuthentication. Configurez JwtBearerDefaults.AuthenticationScheme comme schéma par défaut.

    2. Enregistrez le schéma d’authentification du porteur JWT en faisant un appel à la méthode AddJwtBearer. Configurez votre domaine Auth0 comme autorité et votre identifiant API Auth0 comme public, et assurez-vous que votre domaine Auth0 et votre identifiant API sont définis dans le fichier appsettings.json de votre application. -

      Dans certains cas, le jeton d’accès n’aura pas de sub demande; dans ce cas, le nom User.Identity.Name sera null. Si vous souhaitez mapper une demande différente à User.Identity.Name, ajoutez-la aux options.TokenValidationParameters dans l’appel AddJwtBearer().

    3. Ajoutez l’authentification et l’autorisation du logiciel médiateur au pipeline de logiciel médiateur en ajoutant des appels aux méthodes UseAuthentication et UseAuthorization sous la méthode var app = builder. Build();.

    +

    Dans certains cas, le jeton d’accès n’aura pas de sub demande; dans ce cas, le nom User.Identity.Name sera null. Si vous souhaitez mapper une demande différente à User.Identity.Name, ajoutez-la aux options.TokenValidationParameters dans l’appel AddJwtBearer().

    .

  3. Ajoutez l’authentification et l’autorisation de le logiciel médiateur au pipeline du logiciel médiateur en ajoutant des appels aux méthodes UseAuthentication et UseAuthorization sous la méthode var app = builder.Build(); .

## Valider les permissions {{{ data-action="code" data-code="HasScopeHandler.cs" }}} -

Pour s’assurer qu’un jeton d’accès contient les permissions adéquates, utilisez Policy-Based Authorization (Autorisation basée sur une politique) dans ASP.NET Core :

  1. Créez une nouvelle exigence d’autorisation appelée HasScopeRequirement, qui vérifiera si la demande de scope émise par votre locataire Auth0 est présente et, le cas échéant, vérifiera que la demande contient la permission demandée.

  2. Dans la méthode var builder = WebApplication.CreateBuilder(args); du fichier Program.cs, ajoutez un appel à la méthode app.AddAuthorization.

  3. Ajoutez des politiques pour les permissions en appelant AddPolicy pour chaque permission.

  4. Enregistrez un singleton pour la classe HasScopeHandler.

+

Pour s’assurer qu’un jeton d’accès contient les permissions adéquates, utilisez Policy-Based Authorization (Autorisation basée sur une politique) dans ASP.NET Core :

  1. Créez une nouvelle exigence d’autorisation appelée HasScopeRequirement, qui vérifiera si la demande de scope émise par votre locataire Auth0 est présente et, le cas échéant, vérifiera que la demande contient la permission demandée.

  2. Dans la méthode var builder = WebApplication.CreateBuilder(args); du fichier Program.cs, ajoutez un appel à la méthode app.AddAuthorization.

  3. Ajoutez des politiques pour les permissions en appelant AddPolicy pour chaque permission.

  4. Enregistrez un singleton pour la classe HasScopeHandler.

-## Protéger les points de terminaison des API {{{ data-action="code" data-code="ApiController.cs" }}} +## Protéger les points de terminaison des API {{{ data-action="code" data-code="ApiController.cs" }}} -

Le logiciel médiateur JWT s’intègre aux mécanismes d’authentification et d’autorisation standard de ASP.NET Core.

Pour sécuriser un terminal, ajoutez l’attribut [Authorize] à votre action de contrôleur (ou à tout le contrôleur si vous souhaitez protéger toutes ses actions).

Lors de la sécurisation des points de terminaison qui nécessitent des permissions spécifiques, assurez-vous que la bonne permission est présente dans access_token. Pour ce faire, ajoutez l’attribut Authorize à l’action Scoped et passez read:messages comme paramètre de la policy .

+

Le logiciel médiateur JWT s’intègre aux mécanismes d’authentification et d’autorisation standard de ASP.NET Core.

Pour sécuriser un point de terminaison, ajoutez l’attribut [Authorize] à votre action de contrôleur (ou à tout le contrôleur si vous souhaitez protéger toutes ses actions).

Lors de la sécurisation des points de terminaison qui nécessitent des permissions particulières, assurez-vous que la bonne permission est présente dans access_token. Pour ce faire, ajoutez l’attribut Authorize à l’action Scoped et passez read:messages comme paramètre de la policy.

## Appeler votre API -

La façon dont vous appelez votre API dépend du type d’application que vous développez et du cadre que vous utilisez. Pour en savoir plus, lire le Guide rapide de l’application concernée :

Obtenir un jeton d’accès

Quel que soit le type d’application que vous développez ou le cadre que vous utilisez, vous aurez besoin d’un token d’accès pour appeler votre API.

Si vous appelez votre API à partir d’une application à page unique (SPA) ou native, vous recevrez un jeton d’accès une fois l’autorisation obtenue.

Si vous appelez l’API à partir d’un outil de ligne de commande ou d’un autre service sans identifiants utilisateur, utilisez le Flux Identifiants client. Pour ce faire, enregistrez une Application de communication entre machines et incluez les valeurs suivantes à votre requête :

  • Identificateur client comme paramètre client_id .

  • Secret client comme paramètre client_secret .

  • Identificateur API (la même valeur utilisée pour configurer l'intergiciel plus tôt dans ce guide rapide) comme paramètre audience .

Pour en savoir plus sur l’obtention de l’identificateur client et du secret client pour votre application de communication entre machines, lisez la section Paramètres de l’application.

Exemple de requête


+

La façon dont vous appelez votre API dépend du type d’application que vous développez et du cadre que vous utilisez. Pour en savoir plus, lire le Guide rapide de l’application concernée :

Obtenir un jeton d’accès

Quel que soit le type d’application que vous développez ou le cadre que vous utilisez, vous aurez besoin d’un jeton d’accès pour appeler votre API.

Si vous appelez votre API à partir d’une application à page unique (SPA) ou native, vous recevrez un jeton d’accès une fois l’autorisation obtenue.

Si vous appelez l’API à partir d’un outil de ligne de commande ou d’un autre service sans identifiants utilisateur, utilisez le Flux des identifiants client d’OAuth. Pour ce faire, enregistrez une Application de communication entre machines et incluez les valeurs suivantes à votre requête :

  • ID client comme paramètre client_id.

  • Secret client comme paramètre client_secret.

  • Identifiant API (la même valeur utilisée pour configurer l’intergiciel plus tôt dans ce guide rapide) comme paramètre audience.

Pour en savoir plus sur l’obtention de l’identificateur client et du secret client pour votre application de communication entre machines, lisez la section Paramètres de l’application.

Exemple de demande


 
 
- + -
curl --request post \
+  
curl --request post \
 
   --url 'https://${account.namespace}/oauth/token' \
 
-  --header 'content-type: application/x-www-form-urlencoded'
var client = new RestClient("https://${account.namespace}/oauth/token");
+  --header 'content-type: application/x-www-form-urlencoded'
var client = new RestClient("https://${account.namespace}/oauth/token");
 
 var request = new RestRequest(Method.POST);
 
 request.AddHeader("content-type", "application/x-www-form-urlencoded");
 
-IRestResponse response = client.Execute(request);
package main
+IRestResponse response = client.Execute(request);
package main
 
 
 
@@ -120,11 +120,11 @@ func main() {
 
 
 
-}
HttpResponse<String> response = Unirest.post("https://${account.namespace}/oauth/token")
+}
HttpResponse<String> response = Unirest.post("https://${account.namespace}/oauth/token")
 
   .header("content-type", "application/x-www-form-urlencoded")
 
-  .asString();
var axios = require("axios").default;
+  .asString();
var axios = require("axios").default;
 
 
 
@@ -148,7 +148,7 @@ axios.request(options).then(function (response) {
 
   console.error(error);
 
-});
#import <Foundation/Foundation.h>
+});
#import <Foundation/Foundation.h>
 
 
 
@@ -188,7 +188,7 @@ NSURLSessionDataTask *dataTask = [session dataTaskWithRequest:request
 
                                             }];
 
-[dataTask resume];
$curl = curl_init();
+[dataTask resume];
$curl = curl_init();
 
 
 
@@ -236,7 +236,7 @@ if ($err) {
 
   echo $response;
 
-}
import http.client
+}
import http.client
 
 
 
@@ -258,7 +258,7 @@ data = res.read()
 
 
 
-print(data.decode("utf-8"))
require 'uri'
+print(data.decode("utf-8"))
require 'uri'
 
 require 'net/http'
 
@@ -286,7 +286,7 @@ request["content-type"] = 'application/x-www-form-urlencoded'
 
 response = http.request(request)
 
-puts response.read_body
import Foundation
+puts response.read_body
import Foundation
 
 
 
@@ -330,27 +330,27 @@ dataTask.resume()
-

Appeler un point de terminaison sécurisé

Maintenant que vous avez un jeton d’accès, vous pouvez l’utiliser pour appeler des points de terminaisonAPI sécurisés. Lorsque vous appelez un point de terminaison sécurisé, vous devez inclure le jeton d’accès en tant que jeton de porteur dans l’en-tête Authorization (Autorisation) de la requête. Par exemple, vous pouvez faire une requête au point de terminaison /api/private :


+

Appeler un point de terminaison sécurisé

Maintenant que vous avez un jeton d’accès, vous pouvez l’utiliser pour appeler des points de terminaison API sécurisés. Lorsque vous appelez un point de terminaison sécurisé, vous devez inclure le jeton d’accès en tant que jeton de porteur dans l’en-tête Authorization de la requête. Par exemple, vous pouvez faire une requête au point de terminaison /api/private :


 
 
- + -
curl --request get \
+  
curl --request get \
 
   --url http://localhost:3010/api/private \
 
-  --header 'authorization: Bearer YOUR_ACCESS_TOKEN'
var client = new RestClient("http://localhost:3010/api/private");
+  --header 'authorization: Bearer YOUR_ACCESS_TOKEN'
var client = new RestClient("http://localhost:3010/api/private");
 
 var request = new RestRequest(Method.GET);
 
 request.AddHeader("authorization", "Bearer YOUR_ACCESS_TOKEN");
 
-IRestResponse response = client.Execute(request);
package main
+IRestResponse response = client.Execute(request);
package main
 
 
 
@@ -398,11 +398,11 @@ func main() {
 
 
 
-}
HttpResponse<String> response = Unirest.get("http://localhost:3010/api/private")
+}
HttpResponse<String> response = Unirest.get("http://localhost:3010/api/private")
 
   .header("authorization", "Bearer YOUR_ACCESS_TOKEN")
 
-  .asString();
var axios = require("axios").default;
+  .asString();
var axios = require("axios").default;
 
 
 
@@ -426,7 +426,7 @@ axios.request(options).then(function (response) {
 
   console.error(error);
 
-});
#import <Foundation/Foundation.h>
+});
#import <Foundation/Foundation.h>
 
 
 
@@ -466,7 +466,7 @@ NSURLSessionDataTask *dataTask = [session dataTaskWithRequest:request
 
                                             }];
 
-[dataTask resume];
$curl = curl_init();
+[dataTask resume];
$curl = curl_init();
 
 
 
@@ -516,7 +516,7 @@ if ($err) {
 
   echo $response;
 
-}
import http.client
+}
import http.client
 
 
 
@@ -538,7 +538,7 @@ data = res.read()
 
 
 
-print(data.decode("utf-8"))
require 'uri'
+print(data.decode("utf-8"))
require 'uri'
 
 require 'net/http'
 
@@ -560,7 +560,7 @@ request["authorization"] = 'Bearer YOUR_ACCESS_TOKEN'
 
 response = http.request(request)
 
-puts response.read_body
import Foundation
+puts response.read_body
import Foundation
 
 
 
@@ -604,10 +604,10 @@ dataTask.resume()
-

Appelez le point de terminaison /api/private-scoped de manière similaire, mais assurez-vous que les autorisations API sont configurées correctement et que le jeton d’accès inclut la permission read:messages.

Guide rapide ASP.NET API - Étape 6 Point de contrôle

Vous devriez maintenant pouvoir appeler les points de terminaison /api/private et /api/private.

Exécutez votre application et vérifiez que :

  • GET /api/private est disponible pour les demandes authentifiées.

  • GET /api/private-scoped est disponible pour les demandes authentifiées contenant un jeton d’accès avec la permission read:messages .

+

Appelez le point de terminaison /api/private-scoped de manière similaire, mais assurez-vous que les autorisations API sont configurées correctement et que le jeton d’accès inclut la permission read:messages.

Guide rapide ASP.NET API - Étape 6 - Point de contrôle

Vous devriez maintenant pouvoir appeler les points de terminaison /api/private et /api/private-scoped.

Exécutez votre application et vérifiez que :

  • GET /api/private est disponible pour les demandes authentifiées.

  • GET /api/private-scoped est disponible pour les demandes authentifiées contenant un jeton d’accès avec la permission read:messages.

-

Sorry about that. Here are a few things to double check:

  • make sure ValidIssuer and ValidAudience are configured correctly

  • make sure the token is added as the Authorization header

  • check that the token has the correct scopes (you can use jwt.io to verify)

Still having issues? To get more help, check out our documentation or visit our community page.

+

Nous vous prions de nous excuser pour tout inconvénient causé. Voici quelques éléments à vérifier :

  • assurez-vous que ValidIssuer et ValidAudience sont correctement configurés

  • assurez-vous que le jeton est ajouté en tant qu’en-tête de l'authorisation

  • vérifiez que le jeton a les permissions adéquates (vous pouvez utiliser jwt.io pour vérifier)

Vous rencontrez toujours des problèmes? Pour obtenir de l’aide, consultez notre documentation ou la page de notre communauté.

diff --git a/fr-ca/articles/quickstart/backend/django/interactive.md b/fr-ca/articles/quickstart/backend/django/interactive.md index f7bdce9932..7437d521f2 100644 --- a/fr-ca/articles/quickstart/backend/django/interactive.md +++ b/fr-ca/articles/quickstart/backend/django/interactive.md @@ -7,19 +7,19 @@ files: - files/apiexample/views - files/apiexample/urls github: - path: https://github.com/auth0-samples/auth0-django-api/tree/master/01-Authorization + path: 01-Authorization locale: fr-CA --- # Ajouter une autorisation à votre application API Django -

Ce guide explique comment intégrer Auth0 à n’importe quelle API Python, nouvelle ou ancienne, développée avec Django.

Si vous n’avez pas encore créé d’API dans votre Auth0 Dashboard, vous pouvez utiliser le sélecteur interactif pour créer une nouvelle API Auth0 ou sélectionner une API existante qui représente le projet avec lequel vous souhaitez vous intégrer.

Vous pouvez également lire notre guide de démarrage, qui vous aidera à configurer votre première API via Auth0 Dashboard.

Toute API dans Auth0 est configurée à l’aide d’un identifiant d’API que votre code d’application utilisera comme Audience pour valider le jeton d’accès.

Vous ne connaissez pas Auth0 ? Découvrez Auth0 et l’implémentation de l’authentification et de l’autorisation d’API en utilisant le cadre d'applications OAuth 2.0.

+

Ce guide explique comment intégrer Auth0 à n’importe quelle API Python, nouvelle ou ancienne, développée avec Django.

Si vous n’avez pas encore créé d’API dans votre Auth0 Dashboard, vous pouvez utiliser le sélecteur interactif pour créer une nouvelle API Auth0 ou sélectionner une API existante qui représente le projet avec lequel vous souhaitez vous intégrer.

Vous pouvez également lire notre guide de démarrage, qui vous aidera à configurer votre première API via Auth0 Dashboard.

Toute API dans Auth0 est configurée à l’aide d’un identifiant d’API que votre code d’application utilisera comme Audience pour valider le jeton d’accès.

Vous ne connaissez pas Auth0 ? Découvrez Auth0 et l’implémentation de l’authentification et de l’autorisation d’API en utilisant le cadre d’applications OAuth 2.0.

## Définir les autorisations -

Les autorisations vous permettent de définir comment les ressources peuvent être accessibles au nom de l’utilisateur avec un jeton d’accès donné. Par exemple, vous pouvez choisir d’accorder un accès en lecture à la ressource messages si les utilisateurs ont le niveau d’accès gestionnaire et accorder un accès en écriture à cette ressource s’ils ont le niveau d’accès administrateur.

Vous pouvez définir les autorisations autorisées dans la vue Permissions (Autorisations) de la section API du Auth0 Dashboard. L’exemple suivant utilise la permission read:messages.

Auth0 Dashboard> Applications > APIs (API) > [Specific API (API précise)] > Onglet Permissions (Autorisations)

+

Les autorisations vous permettent de définir comment les ressources peuvent être accessibles au nom de l’utilisateur avec un jeton d’accès donné. Par exemple, vous pouvez choisir d’accorder un accès en lecture à la ressource messages si les utilisateurs ont le niveau d’accès gestionnaire et accorder un accès en écriture à cette ressource s’ils ont le niveau d’accès administrateur.

Vous pouvez définir les autorisations autorisées dans la vue Permissions (Autorisations) de la section API du Auth0 Dashboard. L’exemple suivant utilise la permission read:messages.

Auth0 Dashboard> Applications > APIs (API) > [Specific API (API précise)] > Onglet Permissions (Autorisations)

## Configurer Django pour utiliser Auth0 @@ -31,7 +31,7 @@ locale: fr-CA ## Créer le validateur JWT {{{ data-action="code" data-code="apiexample/validator.py" }}} -

Vous utiliserez une bibliothèque appelée Authlib pour créer un ResourceProtector, qui est un type de Django view decorator (Décorateur de vue Django) qui protège vos ressources (vues API) avec un validateur donné.

Le validateur vérifiera le jeton d’accès que vous passez à la ressource en vérifiant qu’il a une signature et des demandes valides.

Vous pouvez utiliser le validateur JWTBearerTokenValidator d’AuthLib avec quelques ajustements pour vous assurer qu’il est conforme à nos exigences de validation des jetons d’accès.

Pour créer votre Auth0JWTBearerTokenValidator, vous devez le passer à votre domaine et à votre public (Identificateur API). Il obtiendra alors la clé publique nécessaire pour vérifier la signature du jeton et la passera à la classe JWTBearerTokenValidator.

Vous remplacerez ensuite les claims_options de la classe pour vous assurer que les demandes expiry, audience et issue du jeton sont validées selon nos exigences.

Créez le fichier apiexample/validator.py en utilisant le code du panneau interactif.

+

Vous utiliserez une bibliothèque appelée Authlib pour créer un ResourceProtector, qui est un type de Django view decorator (Décorateur de vue Django) qui protège vos ressources (vues API) avec un validateur donné.

Le validateur vérifiera le jeton d’accès que vous passez à la ressource en vérifiant qu’il a une signature et des demandes valides.

Vous pouvez utiliser le validateur JWTBearerTokenValidator d’AuthLib avec quelques ajustements pour vous assurer qu’il est conforme à nos exigences de validation des jetons d’accès.

Pour créer votre Auth0JWTBearerTokenValidator, vous devez le passer à votre domaine et à votre public (Identificateur API). Il obtiendra alors la clé publique nécessaire pour vérifier la signature du jeton et la passera à la classe JWTBearerTokenValidator.

Vous remplacerez ensuite les claims_options de la classe pour vous assurer que les demandes expiry, audience et issue du jeton sont validées selon nos exigences.

Créez le fichier apiexample/validator.py en utilisant le code du panneau interactif.

## Créer les vues API {{{ data-action="code" data-code="apiexample/views.py" }}} @@ -41,27 +41,27 @@ locale: fr-CA ## Ajouter des mappages d’URL {{{ data-action="code" data-code="apiexample/urls.py#8:10" }}} -

Dans les étapes précédentes, vous avez ajouté des méthodes au fichier views.py . Mappez à présent ces méthodes aux URL en utilisant le URL Dispatcher (Répartiteur d’URL) de Django, qui vous permet de mapper les modèles d’URL aux vues.

Ajoutez les modèles d’URL à votre fichier apiexample/urls.py.

Faites un appel à votre API

Pour appeler votre API, vous aurez besoin d’un jeton d’accès. Vous pouvez récupérer un jeton d’accès à des fins de test dans la vue Test dans vos API Settings (Paramètres API).

Auth0 Dashboard> Applications > API > [API specifique] > Onglet Test

Fournissez le jeton d’accès comme en-tête Authorization dans vos requêtes.


+

Dans les étapes précédentes, vous avez ajouté des méthodes au fichier views.py . Mappez à présent ces méthodes aux URL en utilisant le URL Dispatcher (Répartiteur d’URL) de Django, qui vous permet de mapper les modèles d’URL aux vues.

Ajoutez les modèles d’URL à votre fichier apiexample/urls.py.

Faites un appel à votre API

Pour appeler votre API, vous aurez besoin d’un jeton d’accès. Vous pouvez récupérer un jeton d’accès à des fins de test dans la vue Test dans vos API Settings (Paramètres API).

Auth0 Dashboard> Applications > API > [API specifique] > Onglet Test

Fournissez le jeton d’accès comme en-tête Authorization dans vos requêtes.


 
 
- + -
curl --request get \
+  
curl --request get \
 
   --url 'http:///${account.namespace}.com/api_path' \
 
-  --header 'authorization: Bearer YOUR_ACCESS_TOKEN_HERE'
var client = new RestClient("http:///${account.namespace}.com/api_path");
+  --header 'authorization: Bearer YOUR_ACCESS_TOKEN_HERE'
var client = new RestClient("http:///${account.namespace}.com/api_path");
 
 var request = new RestRequest(Method.GET);
 
 request.AddHeader("authorization", "Bearer YOUR_ACCESS_TOKEN_HERE");
 
-IRestResponse response = client.Execute(request);
package main
+IRestResponse response = client.Execute(request);
package main
 
 
 
@@ -109,11 +109,11 @@ func main() {
 
 
 
-}
HttpResponse<String> response = Unirest.get("http:///${account.namespace}.com/api_path")
+}
HttpResponse<String> response = Unirest.get("http:///${account.namespace}.com/api_path")
 
   .header("authorization", "Bearer YOUR_ACCESS_TOKEN_HERE")
 
-  .asString();
var axios = require("axios").default;
+  .asString();
var axios = require("axios").default;
 
 
 
@@ -137,7 +137,7 @@ axios.request(options).then(function (response) {
 
   console.error(error);
 
-});
#import <Foundation/Foundation.h>
+});
#import <Foundation/Foundation.h>
 
 
 
@@ -177,7 +177,7 @@ NSURLSessionDataTask *dataTask = [session dataTaskWithRequest:request
 
                                             }];
 
-[dataTask resume];
$curl = curl_init();
+[dataTask resume];
$curl = curl_init();
 
 
 
@@ -225,7 +225,7 @@ if ($err) {
 
   echo $response;
 
-}
import http.client
+}
import http.client
 
 
 
@@ -247,7 +247,7 @@ data = res.read()
 
 
 
-print(data.decode("utf-8"))
require 'uri'
+print(data.decode("utf-8"))
require 'uri'
 
 require 'net/http'
 
@@ -269,7 +269,7 @@ request["authorization"] = 'Bearer YOUR_ACCESS_TOKEN_HERE'
 
 response = http.request(request)
 
-puts response.read_body
import Foundation
+puts response.read_body
import Foundation
 
 
 
diff --git a/fr-ca/articles/quickstart/backend/golang/interactive.md b/fr-ca/articles/quickstart/backend/golang/interactive.md
index 4665fbb325..a5b8eb9309 100644
--- a/fr-ca/articles/quickstart/backend/golang/interactive.md
+++ b/fr-ca/articles/quickstart/backend/golang/interactive.md
@@ -6,21 +6,21 @@ files:
  - files/middleware/jwt
  - files/main
 github:
-  path: https://github.com/auth0-samples/auth0-golang-api-samples/tree/master/01-Authorization-RS256
+  path: 01-Authorization-RS256
 locale: fr-CA
 ---
 
 # Ajouter une autorisation à votre application Go
 
 
-

Ce guide explique comment intégrer Auth0 à n’importe quelle application API Go, nouvelle ou ancienne, en utilisant le package go-jwt-middleware .

Si vous n’avez pas encore créé d’API dans votre Auth0 dashboard, vous pouvez utiliser le sélecteur interactif pour créer une nouvelle API Auth0 ou sélectionner une API existante pour votre projet.

Pour configurer votre première API via Auth0 Dashboard, consultez notre guide de démarrage.

Chaque API Auth0 utilise l’identifiant d’API, dont votre application a besoin pour valider le jeton d’accès.

Vous ne connaissez pas Auth0 ? Découvrez Auth0 et l’implémentation de l’authentification et de l’autorisation d’API en utilisant le cadre d'applications OAuth 2.0.

+

Ce guide explique comment intégrer Auth0 à n’importe quelle application API Go, nouvelle ou ancienne, en utilisant le package go-jwt-middleware.

Si vous n’avez pas encore créé d’API dans votre Auth0 Dashboard, vous pouvez utiliser le sélecteur interactif pour créer une nouvelle API Auth0 ou sélectionner une API existante pour votre projet.

Pour configurer votre première API via Auth0 Dashboard, consultez notre guide de démarrage.

Chaque API Auth0 utilise l’identificateur API, dont votre application a besoin pour valider le jeton d’accès.

Vous ne connaissez pas Auth0 ? Découvrez Auth0 et l’implémentation de l’authentification et de l’autorisation d’API en utilisant le cadre d’applications OAuth 2.0.

## Définir les autorisations -

Les autorisations vous permettent de définir comment les ressources peuvent être accessibles au nom de l’utilisateur avec un jeton d’accès en particulier. Par exemple, vous pouvez choisir d’accorder un accès en lecture à la ressource messages si les utilisateurs ont le niveau d’accès gestionnaire et un accès en écriture à cette ressource s’ils ont le niveau d’accès administrateur.

Vous pouvez définir les autorisations autorisées dans la vue Permissions (Autorisations) de la section API du Auth0 Dashboard. L’exemple suivant utilise la permission read:messages.

Auth0 Dashboard> Applications > APIs (API) > [Specific API (API précise)] > Onglet Permissions (Autorisations)

+

Les autorisations vous permettent de définir comment les ressources peuvent être accessibles au nom de l’utilisateur avec un jeton d’accès donné. Par exemple, vous pouvez choisir d’accorder un accès en lecture à la ressource messages si les utilisateurs ont le niveau d’accès gestionnaire et un accès en écriture à cette ressource s’ils ont le niveau d’accès administrateur.

Vous pouvez définir les autorisations autorisées dans la vue Permissions (Autorisations) de la section API d’Auth0 Dashboard. L’exemple suivant utilise la permission read:messages.

Auth0 Dashboard> Applications > APIs (API) > [Specific API (API précise)] > Onglet Permissions (Autorisations)

-## Installer des dépendances +## Installer les dépendances

Ajoutez un fichier go.mod pour répertorier toutes les dépendances nécessaires.

// go.mod
@@ -73,32 +73,32 @@ AUTH0_AUDIENCE='${apiIdentifier}'
 ## Créer un logiciel médiateur pour valider les jetons d’accès {{{ data-action="code" data-code="middleware/jwt.go" }}}
 
 
-

La fonction de logiciel médiateur EnsureValidToken valide le jeton d’accès. Vous pouvez appliquer cette fonction à tous les points de terminaison que vous souhaitez protéger. Si le jeton est valide, le point de terminaison libère les ressources. Si le jeton n’est pas valide, l’API renvoie une erreur 401 Authorization (Autorisation 401).

Configurez le logiciel médiateur go-jwt-middleware pour vérifier les jetons d’accès des demandes entrantes.

Par défaut, votre API sera configurée pour utiliser RS256 comme algorithme de signature des jetons. Puisque RS256 fonctionne en utilisant une paire de clés privée/publique, les jetons peuvent être vérifiés par rapport à la clé publique pour votre compte Auth0. Cette clé publique est accessible à https://{yourDomain}/.well-known/jwks.json.

Inclure un mécanisme pour vérifier que le jeton a une scope (permission) suffisante pour accéder aux ressources demandées.

Créer une fonction HasScope pour vérifier et s’assurer que le jeton d’accès a la bonne permission avant de renvoyer une réponse réussie.

+

La fonction de logiciel médiateur EnsureValidToken valide le jeton d’accès. Vous pouvez appliquer cette fonction à tous les points de terminaison que vous souhaitez protéger. Si le jeton est valide, le point de terminaison libère les ressources. Si le jeton n’est pas valide, l’API renvoie une erreur 401 Authorization (Autorisation 401).

Configurez le logiciel médiateur go-jwt-middleware pour vérifier les jetons d’accès des demandes entrantes.

Par défaut, votre API sera configurée pour utiliser RS256 comme algorithme de signature des jetons. Puisque RS256 fonctionne en utilisant une paire de clés privée/publique, les jetons peuvent être vérifiés par rapport à la clé publique pour votre compte Auth0. Cette clé publique est accessible à https://{yourDomain}/.well-known/jwks.json.

Inclure un mécanisme pour vérifier que le jeton a une scope (permission) suffisante pour accéder aux ressources demandées.

Créer une fonction HasScope pour vérifier et s’assurer que le jeton d’accès a la bonne permission avant de renvoyer une réponse réussie.

## Protéger les points de terminaison des API {{{ data-action="code" data-code="main.go" }}} -

Dans cet exemple, vous allez créer un point de terminaison /api/public qui n’utilise pas le logiciel médiateur EnsureToken car il est accessible aux requêtes non authentifiées.

Créez un point de terminaison /api/private qui nécessite le logiciel médiateur EnsureToken car il n’est disponible que pour les requêtes authentifiées contenant un jeton d’accès, sans permission supplémentaire.

Créez un point de terminaison /api/private qui nécessite le logiciel médiateur EnsureToken et HasScope car il n’est disponible que pour les requêtes authentifiées contenant un jeton d’accès dont la permission read:messages est accordée.

Seule la portée read:messages est vérifiée par la fonction HasScope. Vous pouvez l’étendre ou en faire un logiciel médiateur autonome qui accepte plusieurs permissions pour s’adapter à votre cas d’utilisation.

Faire un appel à votre API

Pour appeler votre API, vous avez besoin d’un jeton d’accès. Vous pouvez obtenir un jeton d’accès à des fins de test dans la vue Test dans vos API settings (Paramètres API).

Auth0 Dashboard> Applications > API > [API specifique] > Onglet Test

Fournissez le Jeton d’accès comme un en-tête Authorization (Autorisation) dans vos requêtes.


+

Dans cet exemple, vous allez créer un point de terminaison /api/public qui n’utilise pas le logiciel médiateur EnsureToken car il est accessible aux requêtes non authentifiées.

Créez un point de terminaison /api/private qui nécessite le logiciel médiateur EnsureToken car il n’est disponible que pour les requêtes authentifiées contenant un jeton d’accès, sans permission supplémentaire.

Créez un point de terminaison /api/private qui nécessite le logiciel médiateur EnsureToken et HasScope car il n’est disponible que pour les requêtes authentifiées contenant un jeton d’accès dont la permission read:messages est accordée.

Seule la portée read:messages est vérifiée par la fonction HasScope. Vous pouvez l’étendre ou en faire un logiciel médiateur autonome qui accepte plusieurs permissions pour s’adapter à votre cas d’utilisation.

Faire un appel à votre API

Pour appeler votre API, vous avez besoin d’un jeton d’accès. Vous pouvez obtenir un jeton d’accès à des fins de test dans la vue Test dans vos API settings (Paramètres API).

Auth0 Dashboard> Applications > API > [API specifique] > Onglet Test

Fournissez le Jeton d’accès comme un en-tête Authorization (Autorisation) dans vos requêtes.


 
 
- + -
curl --request get \
+  
curl --request get \
 
   --url 'http:///${account.namespace}/api_path' \
 
-  --header 'authorization: Bearer YOUR_ACCESS_TOKEN_HERE'
var client = new RestClient("http:///${account.namespace}/api_path");
+  --header 'authorization: Bearer YOUR_ACCESS_TOKEN_HERE'
var client = new RestClient("http:///${account.namespace}/api_path");
 
 var request = new RestRequest(Method.GET);
 
 request.AddHeader("authorization", "Bearer YOUR_ACCESS_TOKEN_HERE");
 
-IRestResponse response = client.Execute(request);
package main
+IRestResponse response = client.Execute(request);
package main
 
 
 
@@ -146,11 +146,11 @@ func main() {
 
 
 
-}
HttpResponse<String> response = Unirest.get("http:///${account.namespace}/api_path")
+}
HttpResponse<String> response = Unirest.get("http:///${account.namespace}/api_path")
 
   .header("authorization", "Bearer YOUR_ACCESS_TOKEN_HERE")
 
-  .asString();
var axios = require("axios").default;
+  .asString();
var axios = require("axios").default;
 
 
 
@@ -174,7 +174,7 @@ axios.request(options).then(function (response) {
 
   console.error(error);
 
-});
#import <Foundation/Foundation.h>
+});
#import <Foundation/Foundation.h>
 
 
 
@@ -214,7 +214,7 @@ NSURLSessionDataTask *dataTask = [session dataTaskWithRequest:request
 
                                             }];
 
-[dataTask resume];
$curl = curl_init();
+[dataTask resume];
$curl = curl_init();
 
 
 
@@ -262,7 +262,7 @@ if ($err) {
 
   echo $response;
 
-}
import http.client
+}
import http.client
 
 
 
@@ -284,7 +284,7 @@ data = res.read()
 
 
 
-print(data.decode("utf-8"))
require 'uri'
+print(data.decode("utf-8"))
require 'uri'
 
 require 'net/http'
 
@@ -306,7 +306,7 @@ request["authorization"] = 'Bearer YOUR_ACCESS_TOKEN_HERE'
 
 response = http.request(request)
 
-puts response.read_body
import Foundation
+puts response.read_body
import Foundation
 
 
 
@@ -350,10 +350,10 @@ dataTask.resume()
-

Guide rapide Go API - Étape 5 Point de contrôle

Maintenant que vous avez configuré votre application, lancez votre application et vérifiez que :

  • GET /api/public est disponible pour les demandes non authentifiées.

  • GET /api/private est disponible pour les demandes authentifiées.

  • GET /api/private-scoped est disponible pour les demandes authentifiées contenant un jeton d’accès avec la permission read:messages .

+

Démarrage rapide Go API - Étape 5 - Point de contrôle

Maintenant que vous avez configuré votre application, lancez votre application et vérifiez que :

  • GET /api/public est disponible pour les demandes non authentifiées.

  • GET /api/private est disponible pour les demandes authentifiées.

  • GET /api/private-scoped est disponible pour les demandes authentifiées contenant un jeton d’accès avec la permission read:messages.

-

If your application did not start successfully:

  • Verify you added the token as the Authorization header

  • Ensure the token has the correct scopes. Verify with jwt.io.

Still having issues? Check out our documentation or visit our community page to get more help.

+

Si votre application n’a pas démarré :

  • Vérifiez que vous avez ajouté le jeton en tant qu’en-tête d'autorisation

  • Assurez-vous que le jeton est doté des permissions appropriées. Vérifiez avec jwt.io.

Vous rencontrez toujours des problèmes? Consultez notre documentation ou la page de notre communauté pour obtenir de l’aide.

diff --git a/fr-ca/articles/quickstart/backend/java-spring-security5/interactive.md b/fr-ca/articles/quickstart/backend/java-spring-security5/interactive.md index 677396484d..ee55577b5b 100644 --- a/fr-ca/articles/quickstart/backend/java-spring-security5/interactive.md +++ b/fr-ca/articles/quickstart/backend/java-spring-security5/interactive.md @@ -8,29 +8,29 @@ files: - files/Message - files/APIController github: - path: https://github.com/auth0-samples/auth0-spring-security5-api-sample/tree/master/01-Authorization-MVC + path: 01-Authorization-MVC locale: fr-CA --- # Ajouter l’autorisation à votre application Spring Boot -

Auth0 vous permet d’ajouter rapidement une autorisation à votre application. Ce guide explique comment intégrer Auth0 à n’importe quelle application Spring Boot, nouvelle ou ancienne.

Si vous n’avez pas encore créé d’API dans votre Auth0 Dashboard, vous pouvez utiliser le sélecteur interactif pour créer une nouvelle API Auth0 ou sélectionner une API existante qui représente le projet avec lequel vous souhaitez vous intégrer.

Consultez notre guide de démarrage pour configurer votre première API via Auth0 Dashboard.

Chaque API Auth0 utilise l’identifiant d’API, dont votre application a besoin pour valider le jeton d’accès.

Vous ne connaissez pas Auth0? Découvrez Auth0 et l’implémentation de l’authentification et de l’autorisation d’API en utilisant le cadre d’applications OAuth 2.0.

+

Auth0 vous permet d’ajouter rapidement une autorisation à votre application. Ce guide explique comment intégrer Auth0 à n’importe quelle application Spring Boot, nouvelle ou ancienne.

Si vous n’avez pas encore créé d’API dans votre Auth0 Dashboard, vous pouvez utiliser le sélecteur interactif pour créer une nouvelle API Auth0 ou sélectionner une API existante qui représente le projet avec lequel vous souhaitez vous intégrer.

Consultez notre guide de démarrage pour configurer votre première API via Auth0 Dashboard.

Chaque API Auth0 utilise l’identificateur API, dont votre application a besoin pour valider le jeton d’accès.

Vous ne connaissez pas Auth0? Découvrez Auth0 et l’implémentation de l’authentification et de l’autorisation d’API en utilisant le cadre d’applications OAuth 2.0.

## Définir les autorisations -

Les autorisations vous permettent de définir comment les ressources peuvent être accessibles au nom de l’utilisateur avec un jeton d’accès en particulier. Par exemple, vous pouvez choisir d’accorder un accès en lecture à la ressource messages si les utilisateurs ont le niveau d’accès gestionnaire et un accès en écriture à cette ressource s’ils ont le niveau d’accès administrateur.

Vous pouvez définir les autorisations autorisées dans la vue Permissions (Autorisations) de la section APIs (API) d'Auth0 Dashboard.

Auth0 Dashboard> Applications > APIs (API) > [Specific API (API précise)] > Onglet Permissions (Autorisations)

Cet exemple utilise la permission read:messages.

+

Les autorisations vous permettent de définir comment les ressources peuvent être accessibles au nom de l’utilisateur avec un jeton d’accès donné. Par exemple, vous pouvez choisir d’accorder un accès en lecture à la ressource messages si les utilisateurs ont le niveau d’accès gestionnaire et un accès en écriture à cette ressource s’ils ont le niveau d’accès administrateur.

Vous pouvez définir les autorisations autorisées dans la vue Permissions (Autorisations) de la section API d’Auth0 Dashboard.

Auth0 Dashboard> Applications > APIs (API) > [Specific API (API précise)] > Onglet Permissions (Autorisations)

Cet exemple utilise la permission read:messages.

## Configurer l’exemple de projet {{{ data-action="code" data-code="application.yml#1:6" }}}

L’exemple de projet utilise un fichier /src/main/resources/application.yml, qui le configure pour utiliser le domaine et l’identificateur API Auth0 corrects pour votre API. Si vous téléchargez le code à partir de cette page, il sera automatiquement configuré. En revanche, si vous clonez l’exemple à partir de GitHub, vous devrez le remplir manuellement.

-## Installer des dépendances {{{ data-action="code" data-code="application.yml#1:6" }}} +## Installer les dépendances {{{ data-action="code" data-code="application.yml#1:6" }}} -

Si vous utilisez Gradle, vous pouvez ajouter les dépendances nécessaires en utilisant le plugiciel Gradle de Spring Boot et le plugiciel de gestion des dépendances pour résoudre les problèmes de versions de dépendances :

// build.gradle
+

Si vous utilisez Gradle, vous pouvez ajouter les dépendances nécessaires en utilisant le plugiciel Gradle de Spring Boot et le plugiciel de gestion des dépendances pour résoudre les problèmes de versions de dépendances :

// build.gradle
 
 
 
@@ -105,7 +105,7 @@ locale: fr-CA
 ## Configurer le serveur de ressources {{{ data-action="code" data-code="SecurityConfig.java" }}}
 
 
-

Pour configurer l’application en tant que serveur de ressources et valider les JWT, créez une classe qui fournira une instance de SecurityFilterChain et ajoutez l’annotation @Configuration.

Protéger les points de terminaison des API

Les routes ci-dessous sont disponibles pour les demandes suivantes :

  • GET /api/public : disponible pour les requêtes non authentifiées

  • GET /api/private : disponible pour les requêtes authentifiées contenant un jeton d’accès sans permission supplémentaire

  • GET /api/private-scoped : disponible pour les requêtes authentifiées contenant un jeton d’accès dont la permission read:messages est accordée

L’exemple ci-dessous montre comment sécuriser les méthodes de l’API à l’aide de l’objet HttpSecurity fourni dans la méthode filterChain() de la classe SecurityConfig. Les adaptateurs de routes limitent l’accès en fonction du niveau d’autorisation requis.

Par défaut, Spring Security crée une GrantedAuthority pour chaque permission dans la demande scope du JWT. Cette permission permet d’utiliser la méthode hasAuthority("SCOPE_read:messages") pour restreindre l’accès à un JWT valide qui contient la permission read:messages.

+

Pour configurer l’application en tant que serveur de ressources et valider les JWT, créez une classe qui fournira une instance SecurityFilterChain et ajoutez l’annotation @Configuration.

Protéger les points de terminaison des API

Les routes ci-dessous sont disponibles pour les demandes suivantes :

  • GET /api/public : disponible pour les demandes non authentifiées

  • GET /api/private : disponible pour les demandes authentifiées contenant un jeton d’accès sans permission supplémentaire

  • GET /api/private-scoped : disponible pour les demandes authentifiées contenant un jeton d’accès dont la permission read:messages est accordée

L’exemple ci-dessous montre comment sécuriser les méthodes de l’API à l’aide de l’objet HttpSecurity fourni dans la méthode filterChain() de la classe SecurityConfig. Les adaptateurs de routes limitent l’accès en fonction du niveau d’autorisation requis.

Par défaut, Spring Security crée une GrantedAuthority pour chaque permission dans la demande scope du JWT. Cette permission permet d’utiliser la méthode hasAuthority("SCOPE_read:messages") pour restreindre l’accès à un JWT valide qui contient la permission read:messages.

## Créer l’objet de domaine {{{ data-action="code" data-code="Message.java#1:4" }}} @@ -115,15 +115,15 @@ locale: fr-CA ## Créer le contrôleur d’API {{{ data-action="code" data-code="APIController.java" }}} -

Créez une nouvelle classe appelée APIController pour gérer les demandes vers les points de terminaison. L’APIController possède trois routes définies dans la section Protect API Endpoints (Protéger les points de terminaison des API). Dans cet exemple, toutes les origines sont autorisées par l’annotation @CrossOrigin. Les applications réelles doivent configurer CORS en fonction de leur cas d’utilisation.

+

Créez une nouvelle classe appelée APIController pour gérer les demandes vers les points de terminaison. L’APIController possède trois routes définies dans la section Protéger les points de terminaison des API. Dans cet exemple, toutes les origines sont autorisées par l’annotation @CrossOrigin. Les applications réelles doivent configurer CORS en fonction de leur cas d’utilisation.

## Exécuter l’application {{{ data-action="code" data-code="APIController.java" }}} -

Pour développer et exécuter le projet exemple, exécutez la tâche Gradle bootRun.

Linux ou macOS :

./gradlew bootRun

Windows :

gradlew.bat bootRun

Si vous configurez votre propre application en utilisant Maven et le plugiciel Spring Boot Maven, vous pouvez exécuter l’objectif spring-boot:run.

Linux ou macOS :

mvn spring-boot:run

Windows :

mvn.cmd spring-boot:run

API Spring Boot - Étape 7 - Point de contrôle

L’exemple d’application sera disponible à l’adresse http://localhost:3010/. Pour en savoir plus sur la manière de tester et d’utiliser votre API, consultez l’article Utiliser votre API.

+

Pour développer et exécuter le projet exemple, exécutez la tâche Gradle bootRun.

Linux ou macOS :

./gradlew bootRun

Windows :

gradlew.bat bootRun

Si vous configurez votre propre application en utilisant Maven et le plugiciel Spring Boot Maven Plugin, vous pouvez exécuter l’objectif spring-boot:run.

Linux ou macOS :

mvn spring-boot:run

Windows :

mvn.cmd spring-boot:run

API Spring Boot - Étape 7 - Point de contrôle

L’exemple d’application sera accessible à l’adresse http://localhost:3010/. Pour en savoir plus sur la manière de tester et d’utiliser votre API, consultez Utiliser votre API.

-

If your application did not launch successfully:

Still having issues? Check out our documentation or visit our community page to get more help.

+

Si votre application n’a pas été lancée avec succès :

  • Utilisez la section Dépannage pour vérifier votre configuration.

Vous rencontrez toujours des problèmes? Consultez notre documentation ou la page de notre communauté pour obtenir de l’aide.

diff --git a/fr-ca/articles/quickstart/backend/laravel/interactive.md b/fr-ca/articles/quickstart/backend/laravel/interactive.md index ad7ab0c504..f909fe764e 100644 --- a/fr-ca/articles/quickstart/backend/laravel/interactive.md +++ b/fr-ca/articles/quickstart/backend/laravel/interactive.md @@ -1,57 +1,57 @@ --- title: Ajouter l’autorisation à votre application Laravel -description: Ce guide montre comment intégrer Auth0 avec une nouvelle (ou existante) application Laravel 9 ou 10. +description: Ce guide explique comment intégrer Auth0 avec une nouvelle (ou existante) application Laravel 9 ou 10. interactive: true files: - files/routes/api github: - path: https://github.com/auth0-samples/laravel/tree/7.x/sample + path: sample locale: fr-CA --- # Ajouter l’autorisation à votre application Laravel -

La trousse SDK Laravel Auth0 vous permet d’ajouter rapidement une autorisation basée sur un jeton et un contrôle d’accès au routage à votre application Laravel. Ce guide montre comment intégrer Auth0 avec une nouvelle (ou existante) application Laravel 9 ou 10.


Les applications dorsales diffèrent des applications Web traditionnelles en ce sens qu’elles ne gèrent pas l’authentification des utilisateurs et n’ont pas d’interface utilisateur. Elles fournissent une API avec laquelle d’autres applications peuvent interagir. Elles acceptent les jetons d'accès des en-têtes Authorization dans les requêtes pour contrôler l'accès aux routes.

Des applications frontales distinctes sont généralement créées pour interagir avec ces types d’applications dorsales. Il peut s’agir d’applications à page unique ou d’applications natives ou mobiles (pour lesquelles Auth0 fournit également des trousses SDK).

Pour interagir avec votre application dorsale, les utilisateurs doivent d’abord s’authentifier auprès d’Auth0 à l’aide de l’application frontale. L’application frontale récupère ensuite un jeton d’accès auprès d’Auth0, qu’elle peut utiliser pour adresser des demandes à votre application dorsale au nom de l’utilisateur.

Comme leur nom l’indique, les jetons d’accès sont conçus pour traiter les questions de contrôle d’accès (autorisation) et ne contiennent pas d’informations sur l’utilisateur. Les applications dorsales fonctionnent exclusivement avec des jetons d’accès. Vous pouvez récupérer des informations sur l’utilisateur créateur du jeton à l’aide de la Management API, que nous présenterons plus loin.

+

La trousse SDK Laravel d’Auth0 vous permet d’ajouter rapidement une autorisation basée sur un jeton et un contrôle d’accès au routage à votre application Laravel. Ce guide explique comment intégrer Auth0 avec une nouvelle (ou existante) application Laravel 9 ou 10.


Les applications dorsales diffèrent des applications Web traditionnelles en ce sens qu’elles ne gèrent pas l’authentification des utilisateurs et n’ont pas d’interface utilisateur. Elles fournissent une API avec laquelle d’autres applications peuvent interagir. Elles acceptent les jetons d’accès des en-têtes Authorization dans les requêtes pour contrôler l’accès aux routes.

Des applications frontales distinctes sont généralement créées pour interagir avec ces types d’applications dorsales. Il peut s’agir d’applications à page unique ou d’applications natives ou mobiles (pour lesquelles Auth0 fournit également des trousses SDK).

Pour interagir avec votre application dorsale, les utilisateurs doivent d’abord s’authentifier auprès d’Auth0 à l’aide de l’application frontale. L’application frontale récupère ensuite un jeton d’accès auprès d’Auth0, qu’elle peut utiliser pour adresser des demandes à votre application dorsale au nom de l’utilisateur.

Comme leur nom l’indique, les jetons d’accès sont conçus pour traiter les questions de contrôle d’accès (autorisation) et ne contiennent pas d’informations sur l’utilisateur. Les applications dorsales fonctionnent exclusivement avec des jetons d’accès. Vous pouvez récupérer des informations sur l’utilisateur créateur du jeton à l’aide de la Management API, que nous présenterons plus loin.

-## Installer Laravel +## Installation de Laravel -

Si vous n’avez pas déjà configuré une application Laravel, ouvrez un shell dans un répertoire approprié pour un nouveau projet et exécutez la commande suivante :

composer create-project --prefer-dist laravel/laravel auth0-laravel-api ^9.0
+

Si vous n’avez pas déjà configuré une application Laravel, ouvrez un shell dans un répertoire approprié pour un nouveau projet et exécutez la commande suivante :

composer create-project --prefer-dist laravel/laravel auth0-laravel-api ^9.0
 
 
-

Toutes les commandes de ce guide supposent que vous les exécutez à partir de la racine de votre projet Laravel, donc vous devez bous placer cd dans le nouveau répertoire du projet :

cd auth0-laravel-api
+

Toutes les commandes de ce guide supposent que vous les exécutez à partir de la racine de votre projet Laravel, donc vous devez bous placer cd dans le nouveau répertoire du projet :

cd auth0-laravel-api
 
 

-## Installation de la trousse SDK +## Installation de la trousse SDK -

Exécutez la commande suivante dans le répertoire de votre projet pour installer la trousse SDK Laravel Auth0 :

composer require auth0/login:^7.8 --update-with-all-dependencies
+

Exécutez la commande suivante dans le répertoire de votre projet pour installer la trousse SDK Laravel Auth0 :

composer require auth0/login:^7.8 --update-with-all-dependencies
 
 
-

Générez ensuite un fichier de configuration pour la trousse SDK pour votre application :

php artisan vendor:publish --tag auth0
+

Générez ensuite un fichier de configuration de la trousse SDK pour votre application :

php artisan vendor:publish --tag auth0
 
 

-## Configuration de la trousse SDK +## Configuration SDK -

Exécuter la commande suivante à partir du répertoire de votre projet pour télécharger le CLI Auth0 :

curl -sSfL https://raw.githubusercontent.com/auth0/auth0-cli/main/install.sh | sh -s -- -b .
+

Exécuter la commande suivante à partir du répertoire de votre projet pour télécharger le Interface de ligne de commande (CLI) Auth0 :

curl -sSfL https://raw.githubusercontent.com/auth0/auth0-cli/main/install.sh | sh -s -- -b .
 
 
-

Ensuite, authentifiez le CLI avec votre compte Auth0 en choisissant « as a user (en tant qu’utilisateur) » lorsque vous y êtes invité :

./auth0 login
+

Authentifiez ensuite la CLI avec votre compte Auth0 en choisissant « as a user (en tant qu’utilisateur) » lorsque vous y êtes invité :

./auth0 login
 
 
-

Ensuite, créez une nouvelle application avec Auth0 :

./auth0 apps create \
+

Puis créez une nouvelle application avec Auth0 :

./auth0 apps create \
 
 --name "My Laravel Backend" \
 
@@ -71,7 +71,7 @@ locale: fr-CA
 
 
-

Vous devez également créer une nouvelle API :

./auth0 apis create \
+

Vous devez également créer une nouvelle API :

./auth0 apis create \
 
 --name "My Laravel Backend API" \
 
@@ -85,7 +85,7 @@ locale: fr-CA
 
 
-

Cela produit deux fichiers qui configurent la trousse SDK dans votre répertoire de projet.

Comme ces fichiers contiennent des renseignements personnels, il est important de les traiter comme étant sensibles. Vous devez vous assurer de ne pas les soumettre au contrôle de version. Si vous utilisez Git, vous devez les ajouter à votre fichier .gitignore :

echo ".auth0.*.json" >> .gitignore
+

Cela produit deux fichiers qui configurent la trousse SDK dans votre répertoire de projet.

Comme ces fichiers contiennent des renseignements personnels, il est important de les traiter comme étant sensibles. Vous devez vous assurer de ne pas les soumettre au contrôle de version. Si vous utilisez Git, vous devez les ajouter à votre fichier .gitignore :

echo ".auth0.*.json" >> .gitignore
 
 
@@ -106,7 +106,7 @@ locale: fr-CA
-

Vous pouvez également exiger que le jeton fourni dispose des permissions spécifiques en le combinant avec le logiciel médiateur can de Laravel :

Route::get('/scope', function () {
+

Vous pouvez également exiger que le jeton fourni dispose des permissions spécifiques en le combinant avec le logiciel médiateur can de Laravel :

Route::get('/scope', function () {
 
  return response()->json([
 
@@ -123,7 +123,7 @@ locale: fr-CA
 ## Informations de jeton {{{ data-action="code" data-code="routes/api.php#18:30" }}}
 
 
-

Les informations sur le jeton d’accès fourni sont disponibles via la façade Auth de Laravel, ou la fonction d’assistance auth().

Par exemple, pour récupérer l’identificateur et l’adresse électronique de l’utilisateur :

Route::get('/', function () {
+

Les informations sur le jeton d’accès fourni sont disponibles via la façade Auth de Laravel, ou la fonction d’assistance auth().

Par exemple, pour récupérer l’identificateur et l’adresse courriel de l’utilisateur :

Route::get('/', function () {
 
  if (! auth()->check()) {
 
@@ -156,7 +156,7 @@ locale: fr-CA
 ## Récupérer des informations sur l’utilisateur {{{ data-action="code" data-code="routes/api.php#32:51" }}}
 
 
-

Vous pouvez récupérer des informations sur l’utilisateur créateur du jeton d’accès à partir d’Auth0 en utilisant la Management API Auth0. La trousse SDK fournit une enveloppe pratique pour cette API, accessible par le biais de la méthode management() de la trousse SDK.

Avant de faire des appels Management API, vous devez permettre à votre application de communiquer avec la Management API. Cela peut être fait à partir de la page API du Auth0 Dashboard, en choisissant la Auth0 Management API et en sélectionnant l’onglet Machine to Machine Applications (Communication entre machines). Autoriser votre application Laravel, puis cliquez sur la flèche vers le bas pour choisir les permissions que vous souhaitez accorder.

Dans l’exemple suivant, vous devez accorder la permission read:users. Une liste des points de terminaison API et les permissions requises peuvent être trouvées dans la documentation de la Management API.

use Auth0\Laravel\Facade\Auth0;
+

Vous pouvez récupérer des informations sur l’utilisateur créateur du jeton d’accès à partir d’Auth0 en utilisant Auth0 Management API. La trousse SDK fournit une enveloppe pratique pour cette API, accessible par le biais de la méthode management() de la trousse SDK.

Avant de faire des appels à la Management API, vous devez permettre à votre application de communiquer avec Management API. Cela peut être fait à partir de la page API d’Auth0 Dashboard, en choisissant Auth0 Management API et en sélectionnant l’onglet Machine to Machine Applications (Communication entre machines). Autorisez votre application Laravel, puis cliquez sur la flèche vers le bas pour choisir les permissions que vous souhaitez accorder.

Dans l’exemple suivant, vous devez accorder la permission read:users. Une liste des points de terminaison API et les permissions requises peuvent être trouvées dans la documentation de Management API.

use Auth0\Laravel\Facade\Auth0;
 
 
 
@@ -216,10 +216,10 @@ Route::get('/me', function () {
 ## Récupérer un jeton de test
 
 
-

Pour en savoir plus sur la récupération des jetons d’accès, cliquez ici. Pour ce guide rapide, cependant, vous pouvez simplement utiliser un jeton d’accès à partir de la vue « test » des paramètres de votre API.

La route /me que nous avons créée ci-dessus ne fonctionnera pas avec un jeton de test car aucun utilisateur réel n’y est associé.

Guide rapide Laravel - Étape 8 - Point de contrôle

Ouvrez un shell et essayez d’envoyer des requêtes à votre application.

Commencez par demander la route publique :

curl --request GET \ --url http://localhost:8000/api \ --header 'Accept: application/json'

Ensuite, utilisez votre jeton d’accès dans un en-tête Authorization pour demander une route protégée :

curl --request GET \ --url http://localhost:8000/api/private \ --header 'Accept: application/json' \ --header 'Authorization: Bearer YOUR_ACCESS_TOKEN'

Enfin, essayez de demander la route protégée par des permissions, qui n’aboutira que si le jeton d’accès dispose de la permission read:messages :

curl --request GET \ --url http://localhost:8000/api/scope \ --header 'Accept: application/json' \ --header 'Authorization: Bearer YOUR_ACCESS_TOKEN'

+

Pour en savoir plus sur la récupération des jetons d’accès, cliquez ici. Pour ce démarrage rapide, vous pouvez simplement utiliser un jeton d’accès à partir de l’affichage « test » des paramètres de votre API.

La route /me que nous avons créée ci-dessus ne fonctionnera pas avec un jeton de test car aucun utilisateur réel n’y est associé.

Démarrage rapide Laravel – Étape 8 – Point de contrôle

Ouvrez un shell et essayez d’envoyer des requêtes à votre application.

Commencez par demander la route publique :

curl --request GET \ --url http://localhost:8000/api \ --header ’Accept: application/json’

Ensuite, utilisez votre jeton d’accès dans un en-tête Authorization pour demander une route protégée :

curl --request GET \ --url http://localhost:8000/api/private \ --header ’Accept: application/json’ \ --header ’Authorization : Bearer YOUR_ACCESS_TOKEN’

Enfin, essayez de demander la route protégée par des permissions, qui n’aboutira que si le jeton d’accès dispose de la permission read:messages :

curl --request GET \ --url http://localhost:8000/api/scope \ --header ’Accept: application/json’ \ --header ’Authorization : Bearer YOUR_ACCESS_TOKEN’

-

Here are a couple of things to try:

  • Try running php artisan optimize:clear to clear Laravel's cache.

  • Ensure your .auth0.app.json and .auth0.api.json files are at the root of your project.

  • Ensure you have enabled your Laravel application as a Machine-to-Machine application and granted it all the necessary scopes for the Auth0 Management API from the Auth0 Dashboard.

Encountering problems? Check the SDK's documentation or our documentation hub. You should also consider visiting the community where our team and other community members can help answer your questions.

+

Essayez ce qui suit :

  • Exécutez php artisan optimize:clear pour vider le cache Laravel.

  • Assurez-vous que vos fichiers .auth0.app.json et .auth0.api.json se trouvent à la racine de votre projet.

  • Assurez-vous d’avoir activé votre application Laravel en tant qu’application de communication entre machines et de lui avoir accordé toutes les permissions nécessaires pour Auth0 Management API à partir de Auth0 Dashboard.

Vous rencontrez des problèmes? Consultez la documentation de la trousse SDK ou notre centre de documentation. N’hésitez pas à consulter la communauté où notre équipe et d’autres membres pourront répondre à vos questions.

-

Lecture supplémentaire

  • Référentiels et modèles d’utilisateurs étend la trousse SDK Laravel Auth0 pour utiliser des modèles d’utilisateurs personnalisés, et comment stocker et récupérer les utilisateurs à partir d’une base de données.

  • Événements d'appels explique comment écouter les événements soulevés par la trousse SDK Laravel Auth0, pour personnaliser pleinement le comportement de votre intégration.

  • Le support de la Management API est intégré à la trousse SDK Laravel Auth0, vous permettant d’interagir avec la Management API à partir de votre application Laravel.

+

Lecture supplémentaire

  • Référentiels et modèles d’utilisateurs étend la trousse SDK Laravel Auth0 et permet d’utiliser des modèles d’utilisateurs personnalisés et de stocker et de récupérer des utilisateurs à partir d’une base de données.

  • Événements d’appels explique comment détecter les événements soulevés par la trousse SDK Laravel Auth0, pour personnaliser pleinement le comportement de votre intégration.

  • Le soutien de Management API est intégré à la trousse SDK Laravel Auth0, vous permettant d’interagir avec Management API à partir de votre application Laravel.

diff --git a/fr-ca/articles/quickstart/backend/nodejs/interactive.md b/fr-ca/articles/quickstart/backend/nodejs/interactive.md index e3b612a992..41a621ee45 100644 --- a/fr-ca/articles/quickstart/backend/nodejs/interactive.md +++ b/fr-ca/articles/quickstart/backend/nodejs/interactive.md @@ -1,53 +1,317 @@ --- title: Ajouter une autorisation à votre application API Express.js -description: Ce guide explique comment intégrer Auth0 à n’importe quelle application API Express.js, nouvelle ou existante, en utilisant le package express-oauth2-jwt-bearer . +description: Ce guide explique comment intégrer Auth0 à n’importe quelle application API Express.js, nouvelle ou existante, en utilisant le package express-oauth2-jwt-bearer. interactive: true files: - files/server github: - path: https://github.com/auth0-samples/auth0-express-api-samples/tree/master/01-Authorization-RS256 + path: 01-Authorization-RS256 locale: fr-CA --- # Ajouter une autorisation à votre application API Express.js -

Ce guide explique comment intégrer Auth0 à n’importe quelle application API Express.js, nouvelle ou existante, en utilisant le package express-oauth2-jwt-bearer .

Si vous n’avez pas encore créé d’API dans votre Auth0 Dashboard, utilisez le sélecteur interactif pour créer une nouvelle API Auth0 ou sélectionner une API existante pour votre projet.

Pour configurer votre première API via Auth0 Dashboard, consultez notre guide de démarrage. Chaque API Auth0 utilise l’identificateur API, dont votre application a besoin pour valider le jeton d’accès.

Vous ne connaissez pas Auth0? Découvrez Auth0 et l’implémentation de l’authentification et de l’autorisation d’API en utilisant le cadre d’applications OAuth 2.0.

+

Ce guide explique comment intégrer Auth0 à n’importe quelle application API Express.js, nouvelle ou existante, en utilisant le package express-oauth2-jwt-bearer.

Si vous n’avez pas encore créé d’API dans votre Auth0 Dashboard, utilisez le sélecteur interactif pour créer une nouvelle API Auth0 ou sélectionner une API existante pour votre projet.

Pour configurer votre première API via Auth0 Dashboard, consultez notre guide de démarrage. Chaque API Auth0 utilise l’identificateur API, dont votre application a besoin pour valider le jeton d’accès.

Vous ne connaissez pas Auth0? Découvrez Auth0 et l’implémentation de l’authentification et de l’autorisation d’API en utilisant le cadre d’applications OAuth 2.0.

## Définir les autorisations -

Les autorisations vous permettent de définir comment les ressources peuvent être accessibles au nom de l’utilisateur avec un jeton d’accès en particulier. Par exemple, vous pouvez choisir d’accorder un accès en lecture à la ressource messages si les utilisateurs ont le niveau d’accès gestionnaire et un accès en écriture à cette ressource s’ils ont le niveau d’accès administrateur.

Vous pouvez définir les autorisations autorisées dans la vue Permissions (Autorisations) de la section APIs (API) d'Auth0 Dashboard.

null

Cet exemple utilise la permission read:messages.

+

Les autorisations vous permettent de définir comment les ressources peuvent être accessibles au nom de l’utilisateur avec un jeton d’accès donné. Par exemple, vous pouvez choisir d’accorder un accès en lecture à la ressource messages si les utilisateurs ont le niveau d’accès gestionnaire et un accès en écriture à cette ressource s’ils ont le niveau d’accès administrateur.

Vous pouvez définir les autorisations autorisées dans la vue Permissions (Autorisations) de la section API d’Auth0 Dashboard.

null

Cet exemple utilise la permission read:messages.

## Installer les dépendances -

Tout d’abord, installez la trousse SDK avec npm.

npm install --save express-oauth2-jwt-bearer
+

Tout d’abord, installez la trousse SDK avec npm.

npm install --save express-oauth2-jwt-bearer
 
 

-## Configurer le logiciel médiateur {{{ data-action="code" data-code="server.js#1:10" }}} +## Configurer l’intergiciel {{{ data-action="code" data-code="server.js#1:10" }}} -

Configurez express-oauth2-jwt-bearer avec votre domaine et votre identificateur API.

Le logiciel médiateur checkJwt présenté à droite vérifie si le jeton d’accès de l’utilisateur inclus dans la demande est valide. Si le jeton n’est pas valide, l’utilisateur reçoit une erreur 401 Authorization (Autorisation 401) lorsqu’il tente d’accéder aux points de terminaison.

Le logiciel médiateur ne vérifie pas si le jeton dispose d’une permission suffisante pour accéder aux ressources demandées.

+

Configurez express-oauth2-jwt-bearer avec votre domaine et votre identificateur API.

L’intergiciel checkJwt présenté à droite vérifie si le jeton d’accès de l’utilisateur inclus dans la demande est valide. Si le jeton n’est pas valide, l’utilisateur reçoit une erreur « 401 Authorization » (Autorisation 401) lorsqu’il tente d’accéder aux points de terminaison.

L’intergiciel ne vérifie pas si le jeton dispose d’une permission suffisante pour accéder aux ressources demandées.

## Protéger les points de terminaison des API {{{ data-action="code" data-code="server.js#12:32" }}} -

Pour protéger une route individuelle en exigeant un JWT valide, configurez la route avec le logiciel médiateur checkJwt développé à partir de express-oauth2-jwt-bearer.

Vous pouvez configurer des routes individuelles pour qu’elles recherchent une permission particulière. Pour ce faire, configurez un autre logiciel médiateur avec la méthode requiresScope. Fournissez les permissions requises et appliquez le logiciel médiateur à toutes les routes auxquelles vous souhaitez ajouter une autorisation.

Transmettez les logiciels médiateurs checkJwt et requiredScopes à la route que vous souhaitez protéger.

Dans cette configuration, seuls les jetons d’accès avec la permission read:messages peuvent accéder au point de terminaison.

Faire un appel à votre API

Pour appeler votre API, vous avez besoin d’un jeton d’accès. Vous pouvez obtenir un jeton d’accès à des fins de test dans la vue Test de vos API settings (Paramètres API).

null

Fournir le Jeton d’accès comme un en-tête Authorization dans vos demandes.

curl --request GET \
+

Pour protéger une route individuelle en exigeant un JWT valide, configurez la route avec le logiciel médiateur checkJwt développé à partir de express-oauth2-jwt-bearer.

Vous pouvez configurer des routes individuelles pour qu’elles recherchent une permission particulière. Pour ce faire, configurez un autre logiciel médiateur avec la méthode requiresScope. Fournissez les permissions requises et appliquez le logiciel médiateur à toutes les routes auxquelles vous souhaitez ajouter une autorisation.

Transmettez les logiciels médiateurs checkJwt et requiredScopes à la route que vous souhaitez protéger.

Dans cette configuration, seuls les jetons d’accès avec la permission read:messages peuvent accéder au point de terminaison.

Faire un appel à votre API

Pour appeler votre API, vous avez besoin d’un jeton d’accès. Vous pouvez obtenir un jeton d’accès à des fins de test dans la vue Test dans vos API settings (Paramètres API).

null

Fournir le Jeton d’accès comme un en-tête Authorization dans vos demandes.


 
-  --url http://${account.namespace}/api_path \
+
+ + + + + + + +
curl --request get \
+
+  --url http:///%7ByourDomain%7D/api_path \
+
+  --header 'authorization: Bearer YOUR_ACCESS_TOKEN_HERE'
var client = new RestClient("http:///%7ByourDomain%7D/api_path");
+
+var request = new RestRequest(Method.GET);
+
+request.AddHeader("authorization", "Bearer YOUR_ACCESS_TOKEN_HERE");
+
+IRestResponse response = client.Execute(request);
package main
+
+
+
+import (
+
+ "fmt"
+
+ "net/http"
+
+ "io/ioutil"
+
+)
+
+
+
+func main() {
+
+
+
+ url := "http:///%7ByourDomain%7D/api_path"
+
+
+
+ req, _ := http.NewRequest("get", url, nil)
+
+
+
+ req.Header.Add("authorization", "Bearer YOUR_ACCESS_TOKEN_HERE")
+
+
+
+ res, _ := http.DefaultClient.Do(req)
+
+
+
+ defer res.Body.Close()
+
+ body, _ := ioutil.ReadAll(res.Body)
+
+
+
+ fmt.Println(res)
+
+ fmt.Println(string(body))
+
+
+
+}
HttpResponse<String> response = Unirest.get("http:///%7ByourDomain%7D/api_path")
+
+  .header("authorization", "Bearer YOUR_ACCESS_TOKEN_HERE")
+
+  .asString();
var axios = require("axios").default;
+
+
+
+var options = {
+
+  method: 'get',
+
+  url: 'http:///%7ByourDomain%7D/api_path',
+
+  headers: {authorization: 'Bearer YOUR_ACCESS_TOKEN_HERE'}
+
+};
+
+
+
+axios.request(options).then(function (response) {
+
+  console.log(response.data);
+
+}).catch(function (error) {
+
+  console.error(error);
+
+});
#import <Foundation/Foundation.h>
+
+
+
+NSDictionary *headers = @{ @"authorization": @"Bearer YOUR_ACCESS_TOKEN_HERE" };
+
+
+
+NSMutableURLRequest *request = [NSMutableURLRequest requestWithURL:[NSURL URLWithString:@"http:///%7ByourDomain%7D/api_path"]
+
+                                                       cachePolicy:NSURLRequestUseProtocolCachePolicy
+
+                                                   timeoutInterval:10.0];
+
+[request setHTTPMethod:@"get"];
+
+[request setAllHTTPHeaderFields:headers];
+
+
+
+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];
$curl = curl_init();
+
+
+
+curl_setopt_array($curl, [
+
+  CURLOPT_URL => "http:///%7ByourDomain%7D/api_path",
+
+  CURLOPT_RETURNTRANSFER => true,
+
+  CURLOPT_ENCODING => "",
+
+  CURLOPT_MAXREDIRS => 10,
+
+  CURLOPT_TIMEOUT => 30,
+
+  CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
+
+  CURLOPT_CUSTOMREQUEST => "get",
+
+  CURLOPT_HTTPHEADER => [
+
+    "authorization: Bearer YOUR_ACCESS_TOKEN_HERE"
+
+  ],
+
+]);
+
+
+
+$response = curl_exec($curl);
+
+$err = curl_error($curl);
+
+
+
+curl_close($curl);
+
+
+
+if ($err) {
+
+  echo "cURL Error #:" . $err;
+
+} else {
+
+  echo $response;
+
+}
import http.client
+
+
+
+conn = http.client.HTTPConnection("")
+
+
+
+headers = { 'authorization': "Bearer YOUR_ACCESS_TOKEN_HERE" }
+
+
+
+conn.request("get", "%7ByourDomain%7D/api_path", headers=headers)
+
+
+
+res = conn.getresponse()
+
+data = res.read()
+
+
+
+print(data.decode("utf-8"))
require 'uri'
+
+require 'net/http'
+
+
+
+url = URI("http:///%7ByourDomain%7D/api_path")
+
+
+
+http = Net::HTTP.new(url.host, url.port)
+
+
+
+request = Net::HTTP::Get.new(url)
+
+request["authorization"] = 'Bearer YOUR_ACCESS_TOKEN_HERE'
+
+
+
+response = http.request(request)
+
+puts response.read_body
import Foundation
+
+
+
+let headers = ["authorization": "Bearer YOUR_ACCESS_TOKEN_HERE"]
+
+
+
+let request = NSMutableURLRequest(url: NSURL(string: "http:///%7ByourDomain%7D/api_path")! as URL,
+
+                                        cachePolicy: .useProtocolCachePolicy,
+
+                                    timeoutInterval: 10.0)
+
+request.httpMethod = "get"
+
+request.allHTTPHeaderFields = headers
+
+
+
+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()
- --header 'authorization: Bearer YOUR_ACCESS_TOKEN_HERE' -
-

API Node JS - Étape 4 - Point de contrôle

Maintenant que vous avez configuré votre application, exécutez-la pour vérifier que :

  • GET /api/publicest disponible pour les demandes non authentifiées.

  • GET /api/private est disponible pour les demandes authentifiées.

  • GET /api/private-scoped est disponible pour les demandes authentifiées contenant un jeton d’accès avec la permission read:messages .

+

API Node JS - Étape 4 - Point de contrôle

Maintenant que vous avez configuré votre application, exécutez-la pour vérifier que :

  • GET /api/public est disponible pour les demandes non authentifiées.

  • GET /api/private est disponible pour les demandes authentifiées.

  • GET /api/private-scoped est disponible pour les demandes authentifiées contenant un jeton d’accès avec la permission read:messages.

-

If your application did not start successfully:

  • Verify you added the token as the Authorization header

  • Ensure the token has the correct scopes. Verify with jwt.io.

Still having issues? Check out our documentation or visit our community page to get more help.

+

Si votre application n’a pas démarré avec succès :

  • Vérifiez que vous avez ajouté le jeton en tant qu’en-tête d'autorisation

  • Assurez-vous que le jeton est doté des permissions appropriées. Vérifiez avec jwt.io.

Vous rencontrez toujours des problèmes? Consultez notre documentation ou la page de notre communauté pour obtenir de l’aide.

diff --git a/fr-ca/articles/quickstart/backend/php/interactive.md b/fr-ca/articles/quickstart/backend/php/interactive.md index 0e00587300..ff549c5a65 100644 --- a/fr-ca/articles/quickstart/backend/php/interactive.md +++ b/fr-ca/articles/quickstart/backend/php/interactive.md @@ -6,7 +6,7 @@ files: - files/index - files/router github: - path: https://github.com/auth0-samples/auth0-php-api-samples/tree/main/app + path: app locale: fr-CA --- @@ -15,15 +15,15 @@ locale: fr-CA

Auth0 vous permet d’ajouter rapidement une autorisation de point de terminaison basée sur un jeton à presque tous les types d’application. Ce guide explique comment intégrer Auth0, ajouter une autorisation basée sur un jeton et protéger les routes de l’application en utilisant la trousse SDK Auth0 PHP.

Pour utiliser ce guide rapide, vous devez :

  • Vous inscrire à un compte Auth0 gratuit ou vous connecter à Auth0.

  • Avoir un projet PHP fonctionnel que vous souhaitez intégrer à Auth0. Vous pouvez également consulter ou télécharger une application faisant office d’exemple lorsque vous vous connectez.

-## Configurer Auth0 +## Configuration d’Auth0 -

Pour utiliser les services Auth0, vous devez avoir une application enregistrée dans Auth0 Dashboard. L’application Auth0 est l’endroit où vous configurez le fonctionnement de l’authentification pour votre projet.

Configurer une application

Utilisez le sélecteur interactif pour créer une nouvelle application Auth0 ou sélectionnez une application existante qui représente le projet que vous souhaitez intégrer. Dans Auth0, il est attribué à chaque application un identificateur client unique alphanumérique que votre code d’application utilise pour appeler les API Auth0 via la trousse SDK.

Tous les paramètres que vous configurez à l’aide de ce guide rapide seront automatiquement mis à jour pour votre application dans le Dashboard, qui est l’endroit où vous pourrez gérer vos applications à l’avenir.

Consultez un exemple d’application si vous préférez explorer une configuration complète.

Configurer une API

De même, vous devez créer une nouvelle API Auth0 ou utiliser une API existante qui représente le projet que vous intégrez à partir du Dashboard. Choisissez un identificateur unique pour l’API et notez-le. Cet identificateur vous sera nécessaire pour configurer votre application ci-dessous.

+

Pour utiliser les services Auth0, vous devez avoir une application enregistrée dans Auth0 Dashboard. L’application Auth0 est l’endroit où vous configurez le fonctionnement de l’authentification pour votre projet.

Configurer une application

Utilisez le sélecteur interactif pour créer une nouvelle application Auth0 ou sélectionnez une application existante qui représente le projet que vous souhaitez intégrer. Dans Auth0, il est attribué à chaque application un identificateur client unique alphanumérique que votre code d’application utilise pour appeler les API Auth0 via la trousse SDK.

Tous les paramètres que vous configurez à l’aide de ce guide rapide seront automatiquement mis à jour pour votre application dans le Dashboard, qui est l’endroit où vous pourrez gérer vos applications à l’avenir.

Si vous préférez explorer une configuration complète, consultez plutôt un exemple d’application.

Configurer une API

De même, vous devez créer une nouvelle API Auth0 ou utiliser une API existante qui représente le projet que vous intégrez à partir du Dashboard. Choisissez un identificateur unique pour l’API et notez-le. Cet identificateur vous sera nécessaire pour configurer votre application ci-dessous.

-## Installer la trousse SDK Auth0 PHP {{{ data-action="code" data-code="index.php" }}} +## Installer la trousse SDK PHP Auth0 {{{ data-action="code" data-code="index.php" }}} -

Auth0 fournit une trousse SDK PHP (Auth0-PHP) pour simplifier le processus de mise en œuvre de l’authentification et de l’autorisation Auth0 dans les applications PHP.

La trousse SDK Auth0 PHP nécessite l’installation des bibliothèques HTTP compatibles PSR-17 et PSR-18 pour la gestion des requêtes réseau. Si vous ne disposez pas de bibliothèques, vous pouvez installer des choix fiables en exécutant les commandes suivantes dans votre terminal :

cd <your-project-directory>
+

Auth0 fournit une trousse SDK PHP (Auth0-PHP) pour simplifier le processus de mise en œuvre de l’authentification et de l’autorisation Auth0 dans les applications PHP.

La trousse SDK PHP Auth0 nécessite l’installation des bibliothèques HTTP compatibles PSR-17 et PSR-18 pour la gestion des requêtes réseau. Si vous ne disposez pas de bibliothèques disponibles, vous pouvez installer des choix fiables en exécutant les commandes suivantes dans votre terminal :

cd <your-project-directory>
 
     composer require symfony/http-client nyholm/psr7
 
@@ -33,18 +33,18 @@ locale: fr-CA
 
 
-

Configurer la trousse SDK Auth0

Pour que la trousse SDK fonctionne correctement, vous devez définir les propriétés suivantes dans la trousse SDK Auth0 lors de l’initialisation :

  • strategy: La stratégie permet d’orienter le comportement de la trousse SDK en fonction du cas d’utilisation de votre application. Dans ce cas, vous souhaitez définir la constante

    Auth0\SDK\Configuration\SdkConfiguration::STRATEGY_API

  • domain : Le domaine de votre locataire Auth0. En général, vous le trouverez dans Auth0 Dashboard sous vos Application Settings (Paramètres d’application) dans le champ Domain (Domaine). Si vous utilisez un domaine personnalisé, définissez-le sur la valeur de votre domaine personnalisé.

  • clientId: L’identificateur de l’application Auth0 que vous avez configurée précédemment dans ce guide rapide. Vous pouvez le trouver dans Auth0 Dashboard sous vos Application Settings (Paramètres d’application) dans le champ Client ID (ID client).

  • clientSecret: Le secret de l’application Auth0 que vous avez créée plus tôt dans ce guide rapide. Le secret client se trouve dans Auth0 Dashboard sous vos Application Settings (Paramètres d’application) dans le champ Client Secret (Secret client).

  • audience: L’identificateur de l’API Auth0 que vous avez enregistré ci-dessus. Il doit être fourni sous la forme d’un tableau.

API PHP - Étape 2 - Point de contrôle

Votre SDK Auth0 est maintenant correctement configuré. Exécutez votre application pour vérifier que :

  • La trousse SDK s’initialise correctement.

  • Votre application ne génère aucune erreur liée à Auth0.

+

Configurer la trousse SDK Auth0

Pour que la trousse SDK fonctionne correctement, vous devez définir les propriétés suivantes dans la trousse SDK Auth0 lors de l’initialisation :

  • strategy : La stratégie aide à orienter le comportement du SDK en ce qui concerne l’utilisation de votre application. Dans ce cas, vous souhaitez la définir sur la constante

    Auth0\SDK\Configuration\SdkConfiguration::STRATEGY_API

  • domain : Le domaine de votre locataire Auth0. En général, vous le trouverez dans Auth0 Dashboard dans Application Settings (Paramètres d’application) dans le champ Domain (Domaine). Si vous utilisez un domaine personnalisé, définissez-le plutôt sur la valeur de votre domaine personnalisé.

  • clientId : L’identifiant de l’application Auth0 que vous avez configurée précédemment dans le démarrage rapide. Vous pouvez le trouver dans Auth0 Dashboard, dans la rubrique des paramètres de votre application, dans le champ Client ID (ID client).

  • clientSecret : Le secret de l’application Auth0 que vous avez créée plus tôt dans le démarrage rapide. Le secret client se trouve dans Auth0 Dashboard, dans Application Settings (Paramètres d’application) dans le champ Client Secret (Secret client).

  • public : L’identificateur de l’API Auth0 que vous avez enregistré ci-dessus. Il doit être fourni sous la forme d’un tableau.

API PHP - Étape 2 - Point de contrôle

Votre trousse SDK Auth0 est maintenant correctement configurée. Exécutez votre application pour vérifier que :

  • la trousse SDK s’initialise correctement,

  • votre application ne génère aucune erreur liée à Auth0.

-

Sorry about that. Here's a couple things to double check:

  • Make sure the correct application is selected.

  • Did you save after entering your URLs?

  • Make sure the domain and client ID imported correctly.

Still having issues? Check out our documentation or visit our community page to get more help.

+

Nous vous prions de nous excuser pour tout inconvénient causé. Voici quelques éléments à vérifier :

  • Assurez-vous que la bonne application est sélectionnée

  • Avez-vous procédé à un enregistrement après avoir saisi vos URL?

  • Assurez-vous que le domaine et l’identifiant client ont été importés correctement.

Vous rencontrez toujours des problèmes? Consultez notre documentation ou la page de notre communauté pour obtenir de l’aide.

-## Écouter les jetons du porteur {{{ data-action="code" data-code="index.php#20:23" }}} +## Détecter les jetons du porteur {{{ data-action="code" data-code="index.php#20:23" }}} -

Développez ensuite votre application pour récupérer et traiter les jetons de porteur. Les jetons de porteur sont des jetons d’accès fournis à votre API avec des demandes de clients au nom d’un utilisateur. Les jetons d’accès approuvent ou refusent l’accès aux routes de votre application. C’est ce que l’on appelle l’autorisation de point de terminaison.

La méthode la plus simple pour récupérer les jetons d’accès à partir d’une requête est la méthode getBearerToken() de la trousse SDK PHP. Cette méthode récupère les jetons à partir des paramètres GET, des corps POST, des en-têtes de requête et d’autres sources. Dans ce cas, la trousse SDK PHP traite les jetons transmis par les requêtes GET dans le paramètre token ou dans l’en-tête HTTP Authorization.

+

Développez ensuite votre application pour récupérer et traiter les jetons de porteur. Les jetons de porteur sont des jetons d’accès fournis à votre API avec des demandes de clients au nom d’un utilisateur. Les jetons d’accès approuvent ou refusent l’accès aux routes de votre application. C’est ce que l’on appelle l’autorisation de point de terminaison.

La méthode la plus simple pour récupérer les jetons d’accès à partir d’une requête est la méthode getBearerToken() de la trousse SDK PHP. Cette méthode récupère les jetons à partir des paramètres GET, des corps POST, des en-têtes de requête et d’autres sources. Dans ce cas, la trousse SDK PHP traite les jetons transmis par les requêtes GET dans le paramètre token ou dans l’en-tête HTTP Authorization.

## Créer et configurer des routes {{{ data-action="code" data-code="router.php" }}} @@ -58,9 +58,9 @@ locale: fr-CA ## Configurer l’autorisation des points de terminaison {{{ data-action="code" data-code="router.php#21:31" }}} -

Maintenant que vous avez configuré votre application Auth0, la trousse SDK Auth0 PHP, et que votre application récupère les jetons de porteur des requêtes, l’étape suivante est de configurer l’autorisation des points de terminaison pour votre projet. La méthode getBearerToken() que vous avez mise en œuvre ci-dessus renvoie une classe Token qui contient des informations sur l’accès à la requête.

Étant donné que la méthode getBearerToken() valide et vérifie automatiquement la requête entrante, votre application détermine les détails du jeton d’accès en évaluant la réponse de la méthode. Si la réponse est nulle, c’est qu’aucun jeton valide n’a été fourni. Dans le cas contraire, inspectez le contenu de la réponse pour en savoir plus sur la demande.

Dans le panneau interactif à droite, une validation de la réponse (null ou non) permet de filtrer l’accès à la route /api/private.

+

Maintenant que vous avez configuré votre application Auth0, la trousse SDK PHP Auth0, et que votre application récupère les jetons de porteur des requêtes, l’étape suivante est de configurer l’autorisation des points de terminaison pour votre projet. La méthode getBearerToken() que vous avez mise en œuvre ci-dessus renvoie une classe Token qui contient des informations sur l’accès à la requête.

Étant donné que la méthode getBearerToken() valide et vérifie automatiquement la requête entrante, votre application détermine les détails du jeton d’accès en évaluant la réponse de la méthode. Si la réponse est nulle, c’est qu’aucun jeton valide n’a été fourni. Dans le cas contraire, inspectez le contenu de la réponse pour en savoir plus sur la demande.

Dans le panneau interactif à droite, une validation de la réponse (null ou non) permet de filtrer l’accès à la route /api/private.

## Autoriser avec des permissions {{{ data-action="code" data-code="router.php#33:48" }}} -

Dans certains cas, vous pouvez souhaiter filtrer l’accès à une route spécifique en fonction des permissions demandées dans un jeton d’accès. Comme le montre le panneau interactif de droite, évaluez le contenu de la propriété ’scope’ de la réponse de la méthode getBearerToken() pour vérifier les permissions accordées par le jeton d’accès.

+

Dans certains cas, vous pouvez souhaiter filtrer l’accès à une route particulière en fonction des permissions demandées dans un jeton d’accès. Comme le montre le panneau interactif de droite, évaluez le contenu de la propriété ’scope’ de la réponse de la méthode getBearerToken() pour vérifier les permissions accordées par le jeton d’accès.

diff --git a/fr-ca/articles/quickstart/backend/python/interactive.md b/fr-ca/articles/quickstart/backend/python/interactive.md index 209c146e0a..94d4e17c3c 100644 --- a/fr-ca/articles/quickstart/backend/python/interactive.md +++ b/fr-ca/articles/quickstart/backend/python/interactive.md @@ -6,19 +6,19 @@ files: - files/validator - files/server github: - path: https://github.com/auth0-samples/auth0-python-api-samples/tree/master/00-Starter-Seed + path: 00-Starter-Seed locale: fr-CA --- # Ajouter une autorisation à votre application API Flask -

Ce guide explique comment intégrer Auth0 à n’importe quelle API Python, nouvelle ou ancienne, développée avec Flask.

Si vous n’avez pas encore créé d’API dans votre Auth0 Dashboard, vous pouvez utiliser le sélecteur interactif pour créer une nouvelle API Auth0 ou sélectionner une API existante qui représente le projet avec lequel vous souhaitez vous intégrer.

Vous pouvez également lire notre guide de démarrage qui vous aide à configurer votre première API via Auth0 Dashboard.

Toute API dans Auth0 est configurée à l’aide d’un identificateur d’API que votre code d’application utilisera comme Audience (Public) pour valider le jeton d’accès.

Vous ne connaissez pas Auth0? Découvrez Auth0 et l’implémentation de l’authentification et de l’autorisation d’API en utilisant le cadre d’applications OAuth 2.0.

+

Ce guide explique comment intégrer Auth0 à n’importe quelle API Python, nouvelle ou ancienne, développée avec Flask.

Si vous n’avez pas encore créé d’API dans votre Auth0 Dashboard, vous pouvez utiliser le sélecteur interactif pour créer une nouvelle API Auth0 ou sélectionner une API existante qui représente le projet avec lequel vous souhaitez vous intégrer.

Vous pouvez également lire notre guide de démarrage qui vous aide à configurer votre première API via Auth0 Dashboard.

Toute API dans Auth0 est configurée à l’aide d’un identificateur d’API que votre code d’application utilisera comme Audience (Public) pour valider le jeton d’accès.

Vous ne connaissez pas Auth0? Découvrez Auth0 et l’implémentation de l’authentification et de l’autorisation d’API en utilisant le cadre d’applications OAuth 2.0.

## Définir les autorisations -

Les autorisations vous permettent de définir comment les ressources peuvent être accessibles au nom de l’utilisateur avec un jeton d’accès en particulier. Par exemple, vous pouvez choisir d’accorder un accès en lecture à la ressource messages si les utilisateurs ont le niveau d’accès gestionnaire et un accès en écriture à cette ressource s’ils ont le niveau d’accès administrateur.

Vous pouvez définir les autorisations autorisées dans la vue Permissions (Autorisations) de la section APIs (API) d'Auth0 Dashboard.

Auth0 Dashboard> Applications > APIs (API) > [Specific API (API précise)] > Onglet Permissions (Autorisations)

Cet exemple utilise la permission read:messages.

+

Les autorisations vous permettent de définir comment les ressources peuvent être accessibles au nom de l’utilisateur avec un jeton d’accès en particulier. Par exemple, vous pouvez choisir d’accorder un accès en lecture à la ressource messages si les utilisateurs ont le niveau d’accès gestionnaire et un accès en écriture à cette ressource s’ils ont le niveau d’accès administrateur.

Vous pouvez définir les autorisations autorisées dans la vue Permissions (Autorisations) de la section APIs (API) d'Auth0 Dashboard.

Auth0 Dashboard> Applications > APIs (API) > [Specific API (API précise)] > Onglet Permissions (Autorisations)

Cet exemple utilise la permission read:messages.

## Installer des dépendances @@ -38,17 +38,281 @@ locale: fr-CA ## Créer le validateur JWT {{{ data-action="code" data-code="validator.py" }}} -

Nous allons utiliser une bibliothèque appelée Authlib pour créer un ResourceProtector, qui est un type de Flask decorator qui protège nos ressources (routes API) avec un validateur donné.

Le validateur validera le jeton d’accès que nous transmettons à la ressource en vérifiant qu’il a une signature et des demandes valides.

Nous pouvons utiliser le validateur JWTBearerTokenValidator d’AuthLib avec quelques ajustements pour nous assurer qu’il est conforme à nos exigences de validation des jetons d’accès.

Pour créer notre Auth0JWTBearerTokenValidator, nous devons lui transmettre notre domain et notre audience (Identificateur API). Il obtiendra alors la clé publique nécessaire pour vérifier la signature du jeton et la transmettra à la classe JWTBearerTokenValidator.

Nous remplacerons ensuite les claims_options de la classe pour nous assurer que les demandes d’échéance, de public et d’émission du jeton sont validées selon nos exigences.

+

Nous allons utiliser une bibliothèque appelée Authlib pour créer un ResourceProtector, qui est un type de Flask decorator qui protège nos ressources (routes API) avec un validateur donné.

Le validateur validera le jeton d’accès que nous transmettons à la ressource en vérifiant qu’il a une signature et des demandes valides.

Nous pouvons utiliser le validateur JWTBearerTokenValidator d’AuthLib avec quelques ajustements pour nous assurer qu’il est conforme à nos exigences de validation des jetons d’accès.

Pour créer notre Auth0JWTBearerTokenValidator, nous devons lui transmettre notre domain et notre audience (Identificateur API). Il obtiendra alors la clé publique nécessaire pour vérifier la signature du jeton et la transmettra à la classe JWTBearerTokenValidator.

Nous remplacerons ensuite les claims_options de la classe pour nous assurer que les demandes d’échéance, de public et d’émission du jeton sont validées selon nos exigences.

## Créer une application Flask {{{ data-action="code" data-code="server.py" }}} -

Ensuite, nous allons créer une application Flask avec 3 routes API :

  • /api/public Un point de terminaison public qui ne nécessite aucune authentification.

  • /api/private Un point de terminaison privé qui nécessite un jeton d’accès JWT valide.

  • /api/private-scoped Un point de terminaison privé qui nécessite un jeton d’accès JWT valide contenant la scope donnée.

Les routes protégées auront un décorateur require_auth, qui est un ResourceProtector qui utilise le Auth0JWTBearerTokenValidator que nous avons créé précédemment.

Pour créer Auth0JWTBearerTokenValidator, nous devons lui transmettre le domaine de notre locataire et l’identificateur de l’API que nous avons créée précédemment.

Le decorator require_auth sur la route private_scoped prend en charge un argument supplémentaire "read:messages", qui vérifie la permission du jeton d’accès que nous avons créé précédemment.

Faire un appel à votre API

Pour appeler votre API, vous avez besoin d’un jeton d’accès. Vous pouvez obtenir un jeton d’accès à des fins de test dans la vue Test dans vos API settings (Paramètres API).

Auth0 Dashboard> Applications > API > [API specifique] > Onglet Test

Fournir le jeton d’accès comme un en-tête Authorization dans vos demandes.

curl --request GET \
+

Ensuite, nous allons créer une application Flask avec 3 routes API :

  • /api/public Un point de terminaison public qui ne nécessite aucune authentification.

  • /api/private Un point de terminaison privé qui nécessite un jeton d’accès JWT valide.

  • /api/private-scoped Un point de terminaison privé qui nécessite un jeton d’accès JWT valide contenant la scope donnée.

Les routes protégées auront un décorateur require_auth, qui est un ResourceProtector qui utilise le Auth0JWTBearerTokenValidator que nous avons créé précédemment.

Pour créer Auth0JWTBearerTokenValidator, nous devons lui transmettre le domaine de notre locataire et l’identificateur de l’API que nous avons créée précédemment.

Le decorator require_auth sur la route private_scoped prend en charge un argument supplémentaire "read:messages", qui vérifie la permission du jeton d’accès que nous avons créé précédemment.

Faire un appel à votre API

Pour appeler votre API, vous avez besoin d’un jeton d’accès. Vous pouvez obtenir un jeton d’accès à des fins de test dans la vue Test dans vos API settings (Paramètres API).

Auth0 Dashboard> Applications > API > [API specifique] > Onglet Test

Fournir le jeton d’accès comme un en-tête Authorization dans vos demandes.


 
-  --url http://${account.namespace}/api_path \
+
+ + + + + + + +
curl --request get \
+
+  --url 'http:///${account.namespace}/api_path' \
+
+  --header 'authorization: Bearer YOUR_ACCESS_TOKEN_HERE'
var client = new RestClient("http:///${account.namespace}/api_path");
+
+var request = new RestRequest(Method.GET);
+
+request.AddHeader("authorization", "Bearer YOUR_ACCESS_TOKEN_HERE");
+
+IRestResponse response = client.Execute(request);
package main
+
+
+
+import (
+
+ "fmt"
+
+ "net/http"
+
+ "io/ioutil"
+
+)
+
+
+
+func main() {
+
+
+
+ url := "http:///${account.namespace}/api_path"
+
+
+
+ req, _ := http.NewRequest("get", url, nil)
+
+
+
+ req.Header.Add("authorization", "Bearer YOUR_ACCESS_TOKEN_HERE")
+
+
+
+ res, _ := http.DefaultClient.Do(req)
+
+
+
+ defer res.Body.Close()
+
+ body, _ := ioutil.ReadAll(res.Body)
+
+
+
+ fmt.Println(res)
+
+ fmt.Println(string(body))
+
+
+
+}
HttpResponse<String> response = Unirest.get("http:///${account.namespace}/api_path")
+
+  .header("authorization", "Bearer YOUR_ACCESS_TOKEN_HERE")
+
+  .asString();
var axios = require("axios").default;
+
+
+
+var options = {
+
+  method: 'get',
+
+  url: 'http:///${account.namespace}/api_path',
+
+  headers: {authorization: 'Bearer YOUR_ACCESS_TOKEN_HERE'}
+
+};
+
+
+
+axios.request(options).then(function (response) {
+
+  console.log(response.data);
+
+}).catch(function (error) {
+
+  console.error(error);
+
+});
#import <Foundation/Foundation.h>
+
+
+
+NSDictionary *headers = @{ @"authorization": @"Bearer YOUR_ACCESS_TOKEN_HERE" };
+
+
+
+NSMutableURLRequest *request = [NSMutableURLRequest requestWithURL:[NSURL URLWithString:@"http:///${account.namespace}/api_path"]
+
+                                                       cachePolicy:NSURLRequestUseProtocolCachePolicy
+
+                                                   timeoutInterval:10.0];
+
+[request setHTTPMethod:@"get"];
+
+[request setAllHTTPHeaderFields:headers];
+
+
+
+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];
$curl = curl_init();
+
+
+
+curl_setopt_array($curl, [
+
+  CURLOPT_URL => "http:///${account.namespace}/api_path",
+
+  CURLOPT_RETURNTRANSFER => true,
+
+  CURLOPT_ENCODING => "",
+
+  CURLOPT_MAXREDIRS => 10,
+
+  CURLOPT_TIMEOUT => 30,
+
+  CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
+
+  CURLOPT_CUSTOMREQUEST => "get",
+
+  CURLOPT_HTTPHEADER => [
+
+    "authorization: Bearer YOUR_ACCESS_TOKEN_HERE"
+
+  ],
+
+]);
+
+
+
+$response = curl_exec($curl);
+
+$err = curl_error($curl);
+
+
+
+curl_close($curl);
+
+
+
+if ($err) {
+
+  echo "cURL Error #:" . $err;
+
+} else {
+
+  echo $response;
+
+}
import http.client
+
+
+
+conn = http.client.HTTPConnection("")
+
+
+
+headers = { 'authorization': "Bearer YOUR_ACCESS_TOKEN_HERE" }
+
+
+
+conn.request("get", "/${account.namespace}/api_path", headers=headers)
+
+
+
+res = conn.getresponse()
+
+data = res.read()
+
+
+
+print(data.decode("utf-8"))
require 'uri'
+
+require 'net/http'
+
+
+
+url = URI("http:///${account.namespace}/api_path")
+
+
+
+http = Net::HTTP.new(url.host, url.port)
+
+
+
+request = Net::HTTP::Get.new(url)
+
+request["authorization"] = 'Bearer YOUR_ACCESS_TOKEN_HERE'
+
+
+
+response = http.request(request)
+
+puts response.read_body
import Foundation
+
+
+
+let headers = ["authorization": "Bearer YOUR_ACCESS_TOKEN_HERE"]
+
+
+
+let request = NSMutableURLRequest(url: NSURL(string: "http:///${account.namespace}/api_path")! as URL,
+
+                                        cachePolicy: .useProtocolCachePolicy,
+
+                                    timeoutInterval: 10.0)
+
+request.httpMethod = "get"
+
+request.allHTTPHeaderFields = headers
+
+
+
+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()
- --header 'authorization: Bearer YOUR_ACCESS_TOKEN_HERE' -

diff --git a/fr-ca/articles/quickstart/backend/rails/interactive.md b/fr-ca/articles/quickstart/backend/rails/interactive.md index 36a3334922..8e88006127 100644 --- a/fr-ca/articles/quickstart/backend/rails/interactive.md +++ b/fr-ca/articles/quickstart/backend/rails/interactive.md @@ -1,6 +1,6 @@ --- title: Ajouter une autorisation à votre API Ruby on Rails -description: Ce tutoriel effectue la validation des jetons d’accès en utilisant le Gem jwt dans une classe Auth0Client personnalisée. +description: Ce tutoriel effectue la validation des jetons d’accès en utilisant le gem jwt dans une classe Auth0Client personnalisée. interactive: true files: - files/app/controllers/application_controller @@ -9,24 +9,24 @@ files: - files/app/controllers/public_controller - files/app/controllers/private_controller github: - path: https://github.com/auth0-samples/auth0-rubyonrails-api-samples/tree/master/01-Authentication-RS256 + path: 01-Authentication-RS256 locale: fr-CA --- # Ajouter une autorisation à votre API Ruby on Rails -

Ce tutoriel effectue la validation des jetons d’accès en utilisant le Gem jwt dans une classe Auth0Client personnalisée. Un Concern appelé Secured est utilisé pour autoriser les points de terminaison qui nécessitent une authentification par le biais d’un jeton d’accès entrant.

Si vous n’avez pas encore créé d’API dans votre Auth0 Dashboard, vous pouvez utiliser le sélecteur interactif pour créer une nouvelle API Auth0 ou sélectionner une API existante pour votre projet.

Pour configurer votre première API via Auth0 Dashboard, consultez notre guide de démarrage.

Chaque API Auth0 utilise l’identifiant d’API, dont votre application a besoin pour valider le jeton d’accès.

Vous ne connaissez pas Auth0? Découvrez Auth0 et l’implémentation de l’authentification et de l’autorisation d’API en utilisant le cadre d’applications OAuth 2.0.

+

Ce tutoriel effectue la validation des jetons d’accès en utilisant le gem jwt dans une classe Auth0Client personnalisée. Un concern appelé Secured est utilisé pour autoriser les points de terminaison qui nécessitent une authentification par le biais d’un jeton d’accès entrant.

Si vous n’avez pas encore créé d’API dans votre Auth0 Dashboard, vous pouvez utiliser le sélecteur interactif pour créer une nouvelle API Auth0 ou sélectionner une API existante pour votre projet.

Pour configurer votre première API via Auth0 Dashboard, consultez notre guide de démarrage.

Chaque API Auth0 utilise l’identificateur API, dont votre application a besoin pour valider le jeton d’accès.

Vous ne connaissez pas Auth0? Découvrez Auth0 et l’implémentation de l’authentification et de l’autorisation d’API en utilisant le cadre d’applications OAuth 2.0.

## Définir les autorisations -

Les autorisations vous permettent de définir comment les ressources peuvent être accessibles au nom de l’utilisateur avec un jeton d’accès en particulier. Par exemple, vous pouvez choisir d’accorder un accès en lecture à la ressource messages si les utilisateurs ont le niveau d’accès gestionnaire et un accès en écriture à cette ressource s’ils ont le niveau d’accès administrateur.

Vous pouvez définir les autorisations autorisées dans la vue Permissions (Autorisations) de la section APIs (API) d'Auth0 Dashboard.

Auth0 Dashboard> Applications > APIs (API) > [Specific API (API précise)] > Onglet Permissions (Autorisations)

Cet exemple utilise la permission read:messages.

+

Les autorisations vous permettent de définir comment les ressources peuvent être accessibles au nom de l’utilisateur avec un jeton d’accès donné. Par exemple, vous pouvez choisir d’accorder un accès en lecture à la ressource messages si les utilisateurs ont le niveau d’accès gestionnaire et un accès en écriture à cette ressource s’ils ont le niveau d’accès administrateur.

Vous pouvez définir les autorisations autorisées dans la vue Permissions (Autorisations) de la section API d’Auth0 Dashboard.

Auth0 Dashboard> Applications > APIs (API) > [Specific API (API précise)] > Onglet Permissions (Autorisations)

Cet exemple utilise la permission read:messages.

## Installer les dépendances -

Installer le Gem jwt.

gem 'jwt'
+

Installer le gem jwt.

gem 'jwt'
 
     bundle install
 
@@ -37,17 +37,17 @@ locale: fr-CA
 ## Créer une classe Auth0Client {{{ data-action="code" data-code="app/controllers/concerns/secured.rb" }}}
 
 
-

Créez une classe appelée Auth0Client. Cette classe décode et vérifie le jeton d’accès entrant provenant de l’en-tête Authorization de la demande.

La classe Auth0Client récupère la clé publique de votre locataire Auth0 et l’utilise pour vérifier la signature du jeton d’accès. La structure Token définit une méthode validate_permissions pour rechercher une scope particulière dans un jeton d’accès en fournissant un tableau des permissions requises et en vérifiant si elles sont présentes dans la charge utile du jeton.

+

Créez une classe appelée Auth0Client. Cette classe décode et vérifie le jeton d’accès entrant provenant de l’en-tête Authorization de la requête.

La classe Auth0Client récupère la clé publique de votre locataire Auth0 et l’utilise pour vérifier la signature du jeton d’accès. La structure Token définit une méthode validate_permissions pour rechercher une scope particulière dans un jeton d’accès en fournissant un tableau des permissions requises et en vérifiant si elles sont présentes dans la charge utile du jeton.

## Définir un concern Secured {{{ data-action="code" data-code="app/controllers/concerns/secured.rb" }}} -

Créez un Concern appelé Secured qui recherche le jeton d’accès dans l’en-tête Authorization d’une requête entrante.

Si le jeton est présent, Auth0Client.validate_token utilisera le Gem jwt pour vérifier la signature du jeton et valider les demandes du jeton.

Outre la vérification de la validité du jeton d’accès, Concern possède un mécanisme permettant de confirmer que le jeton dispose d’une permission suffisante pour accéder aux ressources demandées. Dans cet exemple, nous définissons une méthode validate_permissions qui reçoit un bloc et vérifie les autorisations en appelant la méthode Token.validate_permissions de la classe Auth0Client.

Pour la route /private-scoped, les permissions définies seront croisées avec les permissions provenant de la charge utile, afin de déterminer si elle contient un ou plusieurs éléments de l’autre tableau.

+

Créez un concern appelé Secured qui recherche le jeton d’accès dans l’en-tête Authorization d’une requête entrante.

Si le jeton est présent, Auth0Client.validate_token utilisera le gem jwt pour vérifier la signature du jeton et valider les demandes du jeton.

Outre la vérification de la validité du jeton d’accès, concern possède un mécanisme permettant de confirmer que le jeton dispose d’une permission suffisante pour accéder aux ressources demandées. Dans cet exemple, nous définissons une méthode validate_permissions qui reçoit un bloc et vérifie les autorisations en appelant la méthode Token.validate_permissions de la classe Auth0Client.

Pour la route /private-scoped, les permissions définies seront croisées avec les permissions provenant de la charge utile, afin de déterminer si elle contient un ou plusieurs éléments de l’autre tableau.

-## Inclure le concern Secure dans votre ApplicationController {{{ data-action="code" data-code="app/controllers/application_controller.rb" }}} +## Inclure la préoccupation Secure dans votre ApplicationController {{{ data-action="code" data-code="app/controllers/application_controller.rb" }}} -

En ajoutant le concern Secure à votre contrôleur d’application, vous n’aurez plus qu’à utiliser un filtre before_action dans le contrôleur qui requiert une autorisation.

+

En ajoutant la préoccupation Secure à votre contrôleur d’application, vous n’aurez plus qu’à utiliser un filtre before_action dans le contrôleur qui requiert une autorisation.

## Créer le point de terminaison public {{{ data-action="code" data-code="app/controllers/public_controller.rb" }}} @@ -57,18 +57,282 @@ locale: fr-CA ## Créer les points de terminaison privés {{{ data-action="code" data-code="app/controllers/private_controller.rb" }}} -

Créez un contrôleur pour gérer les points de terminaison privés : /api/private et /api/private-scoped.

/api/private est disponible pour les requêtes authentifiées contenant un jeton d’accès sans permission supplémentaire.

/api/private-scoped est disponible pour les requêtes authentifiées contenant un jeton d’accès dont la permission read:messages est accordée.

Les points de terminaison protégés doivent appeler la méthode authorize du concern Secured; vous devez pour cela utiliser before_action :authorize, ce qui assure que la méthode Secured.authorize est appelée avant chaque action dans le PrivateController.

Faire un appel à votre API

Pour appeler votre API, vous avez besoin d’un jeton d’accès. Vous pouvez obtenir un jeton d’accès à des fins de test dans la vue Test dans vos API settings (Paramètres API).

Auth0 Dashboard> Applications > API > [API specifique] > Onglet Test

Fournir le Jeton d’accès comme un en-tête Authorization dans vos demandes.

curl --request GET \
+

Créez un contrôleur pour traiter les points de terminaison privés : /api/private et /api/private-scoped.

/api/private est disponible pour les requêtes authentifiées contenant un jeton d’accès sans permission supplémentaire.

/api/private-scoped est disponible pour les requêtes authentifiées contenant un jeton d’accès dont la permission read:messages est accordée.

Les points de terminaison protégés doivent appeler la méthode authorize du concern Secured; vous devez pour cela utiliser before_action :authorize, ce qui assure que la méthode Secured.authorize est appelée avant chaque action dans le PrivateController.

Faire un appel à votre API

Pour appeler votre API, vous avez besoin d’un jeton d’accès. Vous pouvez obtenir un jeton d’accès à des fins de test dans la vue Test dans vos API settings (Paramètres API).

Auth0 Dashboard> Applications > API > [API specifique] > Onglet Test

Fournissez le jeton d’accès comme un en-tête Authorization dans vos demandes.


 
-  --url http://${account.namespace}/api_path \
+
+ + + + + + + +
curl --request get \
+
+  --url 'http:///${account.namespace}/api_path' \
+
+  --header 'authorization: Bearer YOUR_ACCESS_TOKEN_HERE'
var client = new RestClient("http:///${account.namespace}/api_path");
+
+var request = new RestRequest(Method.GET);
+
+request.AddHeader("authorization", "Bearer YOUR_ACCESS_TOKEN_HERE");
+
+IRestResponse response = client.Execute(request);
package main
+
+
+
+import (
+
+ "fmt"
+
+ "net/http"
+
+ "io/ioutil"
+
+)
+
+
+
+func main() {
+
+
+
+ url := "http:///${account.namespace}/api_path"
+
+
+
+ req, _ := http.NewRequest("get", url, nil)
+
+
+
+ req.Header.Add("authorization", "Bearer YOUR_ACCESS_TOKEN_HERE")
+
+
+
+ res, _ := http.DefaultClient.Do(req)
+
+
+
+ defer res.Body.Close()
+
+ body, _ := ioutil.ReadAll(res.Body)
+
+
+
+ fmt.Println(res)
+
+ fmt.Println(string(body))
+
+
+
+}
HttpResponse<String> response = Unirest.get("http:///${account.namespace}/api_path")
+
+  .header("authorization", "Bearer YOUR_ACCESS_TOKEN_HERE")
+
+  .asString();
var axios = require("axios").default;
+
+
+
+var options = {
+
+  method: 'get',
+
+  url: 'http:///${account.namespace}/api_path',
+
+  headers: {authorization: 'Bearer YOUR_ACCESS_TOKEN_HERE'}
+
+};
+
+
+
+axios.request(options).then(function (response) {
+
+  console.log(response.data);
+
+}).catch(function (error) {
+
+  console.error(error);
+
+});
#import <Foundation/Foundation.h>
+
+
+
+NSDictionary *headers = @{ @"authorization": @"Bearer YOUR_ACCESS_TOKEN_HERE" };
+
+
+
+NSMutableURLRequest *request = [NSMutableURLRequest requestWithURL:[NSURL URLWithString:@"http:///${account.namespace}/api_path"]
+
+                                                       cachePolicy:NSURLRequestUseProtocolCachePolicy
+
+                                                   timeoutInterval:10.0];
+
+[request setHTTPMethod:@"get"];
+
+[request setAllHTTPHeaderFields:headers];
+
+
+
+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];
$curl = curl_init();
+
+
+
+curl_setopt_array($curl, [
+
+  CURLOPT_URL => "http:///${account.namespace}/api_path",
+
+  CURLOPT_RETURNTRANSFER => true,
+
+  CURLOPT_ENCODING => "",
+
+  CURLOPT_MAXREDIRS => 10,
+
+  CURLOPT_TIMEOUT => 30,
+
+  CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
+
+  CURLOPT_CUSTOMREQUEST => "get",
+
+  CURLOPT_HTTPHEADER => [
+
+    "authorization: Bearer YOUR_ACCESS_TOKEN_HERE"
+
+  ],
+
+]);
+
+
+
+$response = curl_exec($curl);
+
+$err = curl_error($curl);
+
+
+
+curl_close($curl);
+
+
+
+if ($err) {
+
+  echo "cURL Error #:" . $err;
+
+} else {
+
+  echo $response;
+
+}
import http.client
+
+
+
+conn = http.client.HTTPConnection("")
+
+
+
+headers = { 'authorization': "Bearer YOUR_ACCESS_TOKEN_HERE" }
+
+
+
+conn.request("get", "/${account.namespace}/api_path", headers=headers)
+
+
+
+res = conn.getresponse()
+
+data = res.read()
+
+
+
+print(data.decode("utf-8"))
require 'uri'
+
+require 'net/http'
+
+
+
+url = URI("http:///${account.namespace}/api_path")
+
+
+
+http = Net::HTTP.new(url.host, url.port)
+
+
+
+request = Net::HTTP::Get.new(url)
+
+request["authorization"] = 'Bearer YOUR_ACCESS_TOKEN_HERE'
+
+
+
+response = http.request(request)
+
+puts response.read_body
import Foundation
+
+
+
+let headers = ["authorization": "Bearer YOUR_ACCESS_TOKEN_HERE"]
+
+
+
+let request = NSMutableURLRequest(url: NSURL(string: "http:///${account.namespace}/api_path")! as URL,
+
+                                        cachePolicy: .useProtocolCachePolicy,
+
+                                    timeoutInterval: 10.0)
+
+request.httpMethod = "get"
+
+request.allHTTPHeaderFields = headers
+
+
+
+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()
- --header 'authorization: Bearer YOUR_ACCESS_TOKEN_HERE' -
-

Ruby on Rails - Étape 7- Point de contrôle

Maintenant que vous avez configuré votre application, exécutez-la pour vérifier que :

  • GET /api/public est disponible pour les demandes non authentifiées.

  • GET /api/private est disponible pour les demandes authentifiées.

  • GET /api/private-scoped est disponible pour les demandes authentifiées contenant un jeton d’accès avec la permission read:messages .

+

Ruby on Rails - Étape 7- Point de contrôle

Maintenant que vous avez configuré votre application, exécutez-la pour vérifier que :

  • GET /api/public est disponible pour les demandes non authentifiées.

  • GET /api/private est disponible pour les demandes authentifiées.

  • GET /api/private-scoped est disponible pour les demandes authentifiées contenant un jeton d’accès avec la permission read:messages.

-

If your application did not start successfully:

  • Verify you added the token as the Authorization header

  • Ensure the token has the correct scopes. Verify with jwt.io.

Still having issues? Check out our documentation or visit our community page to get more help.

+

Si votre application n’a pas démarré avec succès :

  • Vérifiez que vous avez ajouté le jeton en tant qu’en-tête d'autorisation

  • Assurez-vous que le jeton est doté des permissions appropriées. Vérifiez avec jwt.io.

Vous rencontrez toujours des problèmes? Consultez notre documentation ou la page de notre communauté pour obtenir de l’aide.

diff --git a/fr-ca/articles/quickstart/backend/webapi-owin/interactive.md b/fr-ca/articles/quickstart/backend/webapi-owin/interactive.md index 06208724a3..f971d46fe9 100644 --- a/fr-ca/articles/quickstart/backend/webapi-owin/interactive.md +++ b/fr-ca/articles/quickstart/backend/webapi-owin/interactive.md @@ -8,51 +8,51 @@ files: - files/ScopeAuthorizeAttribute - files/ApiController github: - path: https://github.com/auth0-samples/auth0-aspnet-owin-webapi-samples/tree/master/Quickstart/Sample + path: Quickstart/Sample locale: fr-CA --- # Ajouter une autorisation à votre application API ASP.NET OWIN Web -

Auth0 vous permet d’ajouter une autorisation à n’importe quel type d’application. Ce guide explique comment intégrer Auth0 à n’importe quelle application API ASP.NET Owin Web, nouvelle ou ancienne, à l’aide du package Microsoft.Owin.Security.Jwt.

Si vous n’avez pas encore créé d’API dans votre Auth0 dashboard, vous pouvez utiliser le sélecteur interactif pour créer une nouvelle API Auth0 ou sélectionner une API existante pour votre projet.

Pour configurer votre première API via Auth0 dashboard, consultez notre guide de démarrage.

Chaque API Auth0 utilise l’identifiant d’API, dont votre application a besoin pour valider le jeton d’accès.

Vous ne connaissez pas Auth0 ? Découvrez Auth0 et l’implémentation de l’authentification et de l’autorisation d’API en utilisant le cadre d'applications OAuth 2.0.

+

Auth0 vous permet d’ajouter une autorisation à n’importe quel type d’application. Ce guide explique comment intégrer Auth0 à n’importe quelle application API ASP.NET Owin Web, nouvelle ou ancienne, à l’aide du package Microsoft.Owin.Security.Jwt.

Si vous n’avez pas encore créé d’API dans votre Auth0 Dashboard, vous pouvez utiliser le sélecteur interactif pour créer une nouvelle API Auth0 ou sélectionner une API existante pour votre projet.

Pour configurer votre première API via Auth0 Dashboard, consultez notre guide de démarrage.

Chaque API Auth0 utilise l’identificateur API, dont votre application a besoin pour valider le jeton d’accès.

Vous ne connaissez pas Auth0 ? Découvrez Auth0 et l’implémentation de l’authentification et de l’autorisation d’API en utilisant le cadre d’applications OAuth 2.0.

## Définir les autorisations -

Les autorisations vous permettent de définir comment les ressources peuvent être accessibles au nom de l’utilisateur avec un jeton d’accès donné. Par exemple, vous pouvez choisir d’accorder un accès en lecture à la ressource messages si les utilisateurs ont le niveau d’accès gestionnaire et un accès en écriture à cette ressource s’ils ont le niveau d’accès administrateur.

Vous pouvez définir les autorisations autorisées dans la vue Permissions (Autorisations) de la section API du Auth0 Dashboard. L’exemple suivant utilise la permission read:messages.

Auth0 Dashboard> Applications > APIs (API) > [Specific API (API précise)] > Onglet Permissions (Autorisations)

+

Les autorisations vous permettent de définir comment les ressources peuvent être accessibles au nom de l’utilisateur avec un jeton d’accès donné. Par exemple, vous pouvez choisir d’accorder un accès en lecture à la ressource messages si les utilisateurs ont le niveau d’accès gestionnaire et un accès en écriture à cette ressource s’ils ont le niveau d’accès administrateur.

Vous pouvez définir les autorisations autorisées dans la vue Permissions (Autorisations) de la section API d’Auth0 Dashboard. L’exemple suivant utilise la permission read:messages.

Auth0 Dashboard> Applications > APIs (API) > [Specific API (API précise)] > Onglet Permissions (Autorisations)

-## Installer des dépendances +## Installer les dépendances -

Installez le NuGetPackage Microsoft.Owin.Security.Jwt. Ce package contient le logiciel médiateur OWIN JWT nécessaire pour utiliser les jetons d’accès Auth0 dans l’API Web ASP.NET Owin.

Install-Package Microsoft.Owin.Security.Jwt
+

Installez le NuGetPackage Microsoft.Owin.Security.Jwt. Ce package contient l’intergiciel OWIN JWT nécessaire pour utiliser les jetons d’accès Auth0 dans l’API Web ASP.NET Owin.

Install-Package Microsoft.Owin.Security.Jwt
 
 

-## Configurer le logiciel médiateur {{{ data-action="code" data-code="Startup.cs" }}} +## Configurer l’intergiciel {{{ data-action="code" data-code="Startup.cs" }}} -

Allez dans la méthode de Configuration de votre classe de Startup et ajoutez un appel à UseJwtBearerAuthentication passant dans les JwtBearerAuthenticationOptions configurées.

JwtBearerAuthenticationOptions doit indiquer votre identificateur API Auth0 dans la propriété ValidAudience et le chemin complet vers votre domaine Auth0 en tant que ValidIssuer. Vous devrez configurer l’instance IssuerSigningKeyResolver pour utiliser l’instance OpenIdConnectSigningKeyResolver afin de résoudre la clé de connexion.

N’oubliez pas la barre oblique finale.

Assurez-vous que l’URL précisée pour ValidIssuer contient une barre oblique (/) finale. Cela doit correspondre exactement à la demande de l’émetteur JWT. Les appels d’API ne s’authentifieront pas correctement si vous avez mal configuré cette valeur.

+

Allez dans la méthode de Configuration de votre classe Startup et ajoutez un appel à UseJwtBearerAuthentication passant dans les JwtBearerAuthenticationOptions configurées.

JwtBearerAuthenticationOptions doit indiquer votre identificateur API Auth0 dans la propriété ValidAudience et le chemin complet vers votre domaine Auth0 en tant que ValidIssuer. Vous devrez configurer l’instance IssuerSigningKeyResolver pour utiliser l’instance OpenIdConnectSigningKeyResolver afin de résoudre la clé de connexion.

N’oubliez pas la barre oblique finale.

Assurez-vous que l’URL précisée pour ValidIssuer contient une barre oblique (/) finale. Cela doit correspondre exactement à la demande de l’émetteur JWT. Les appels d’API ne s’authentifieront pas correctement si vous avez mal configuré cette valeur.

## Vérifier la signature du jeton {{{ data-action="code" data-code="OpenIdConnectSigningKeyResolver.cs" }}} -

Le logiciel médiateur OWIN JWT n’utilise pas Open ID Connect Discovery par défaut, vous devez donc fournir un IssuerSigningKeyResolver personnalisé.

Créez la classe OpenIdConnectSigningKeyResolver et assurez-vous de retourner la bonne SecurityKey en implémentant GetSigningKey. Cette classe est ensuite utilisée comme TokenValidationParameters.IssuerSigningKeyResolver lors de la configuration du logiciel médiateur dans Startup.cs.

+

Le logiciel médiateur OWIN JWT n’utilise pas Open ID Connect Discovery par défaut, vous devez donc fournir un IssuerSigningKeyResolver personnalisé.

Créez la classe OpenIdConnectSigningKeyResolver et assurez-vous de retourner la bonne SecurityKey en implémentant GetSigningKey. Cette classe est ensuite utilisée comme TokenValidationParameters.IssuerSigningKeyResolver lors de la configuration du logiciel médiateur dans Startup.cs.

## Valider les permissions {{{ data-action="code" data-code="ScopeAuthorizeAttribute.cs" }}} -

Le logiciel médiateur JWT vérifie que le jeton d’accès inclus dans la demande est valide; cependant, il n’inclut pas encore de mécanisme pour vérifier que le jeton a une permission suffisante pour accéder aux ressources demandées.

Créez une classe appelée ScopeAuthorizeAttribute qui hérite de System.Web.Http.AuthorizeAttribute. Cet attribut vérifiera que la demande de scope émise par votre locataire Auth0 est présente, et si oui, il assurera que la demande de scope contient la permission demandée.

+

Le logiciel médiateur JWT vérifie que le jeton d’accès inclus dans la requête est valide; cependant, il n’inclut pas encore de mécanisme pour vérifier que le jeton a une scope (permission) suffisante pour accéder aux ressources demandées.

Créez une classe appelée ScopeAuthorizeAttribute qui hérite de System.Web.Http.AuthorizeAttribute. Cet attribut vérifiera que la demande de scope émise par votre locataire Auth0 est présente, et si oui, il assurera que la demande de scope contient la permission demandée.

## Protéger les points de terminaison des API {{{ data-action="code" data-code="ApiController.cs" }}} -

Les routes ci-dessous sont disponibles pour les requêtes suivantes :

  • GET /api/public : disponible pour les requêtes non authentifiées.

  • GET /api/private : disponible pour les requêtes authentifiées contenant un jeton d’accès sans permission supplémentaire.

  • GET /api/private-scoped : disponible pour les requêtes authentifiées contenant un jeton d’accès dont la permission read:messages est accordée.

Le logiciel médiateur JWT s’intègre aux mécanismes d’authentification et d’autorisation standard d’ASP.NET, vous n’avez donc qu’à décorer votre action de contrôleur avec l’attribut [Authorize] pour sécuriser un point de terminaison.

Mettez à jour l’action avec l’attribut ScopeAuthorize et passez le nom de la scope requise dans le paramètre scope. Cela garantit que la permission adéquate est disponible pour appeler un point de terminaison d’API donné.

Guide rapide ASP.NET API OWIN - Étape 6 Point de contrôle

Maintenant que vous avez configuré votre application, lancez votre application et vérifiez que :

  • GET /api/public est disponible pour les demandes non authentifiées.

  • GET /api/private est disponible pour les demandes authentifiées.

  • GET /api/private-scoped est disponible pour les demandes authentifiées contenant un jeton d’accès avec la permission read:messages .

+

Les routes ci-dessous sont disponibles pour les demandes suivantes :

  • GET /api/public : Disponible pour les demandes non authentifiées.

  • GET /api/private : Disponible pour les demandes authentifiées contenant un jeton d’accès sans permission supplémentaire.

  • GET /api/private-scoped : Disponible pour les demandes authentifiées contenant un jeton d’accès dont la permission read:messages est accordée.

L’intergiciel JWT s’intègre aux mécanismes d’authentification et d’autorisation standard d’ASP.NET, vous n’avez donc qu’à décorer votre action de contrôleur avec l’attribut [Authorize] pour obtenir un point de terminaison.

Mettez à jour l’action avec l’attribut ScopeAuthorize et passez le nom de la scope requise dans le paramètre scope. Cela garantit que la permission adéquate est disponible pour appeler un point de terminaison d’API donné.

Guide rapide ASP.NET API OWIN - Étape 6 - Point de contrôle

Maintenant que vous avez configuré votre application, lancez votre application et vérifiez que :

  • GET /api/public est disponible pour les demandes non authentifiées.

  • GET /api/private est disponible pour les demandes authentifiées.

  • GET /api/private-scoped est disponible pour les demandes authentifiées contenant un jeton d’accès avec la permission read:messages.

-

If your application did not start successfully:

  • Ensure your configured the ValidIssuer and ValidAudience values correctly

  • Verify you added the token as the Authorization header

  • Ensure the token has the correct scopes. Verify with jwt.io.

Still having issues? Check out our documentation or visit our community page to get more help.

+

Si votre application n’a pas démarré avec succès :

  • Assurez-vous que les valeurs ValidIssuer et ValidAudience sont correctement configurées

  • Vérifiez que vous avez ajouté le jeton en tant qu’en-tête d'autorisation

  • Assurez-vous que le jeton est doté des permissions appropriées. Vérifiez avec jwt.io.

Vous rencontrez toujours des problèmes? Consultez notre documentation ou la page de notre communauté pour obtenir de l’aide.

diff --git a/fr-ca/articles/quickstart/native/android-facebook-login/interactive.md b/fr-ca/articles/quickstart/native/android-facebook-login/interactive.md index 715af1d903..a61a7c178b 100644 --- a/fr-ca/articles/quickstart/native/android-facebook-login/interactive.md +++ b/fr-ca/articles/quickstart/native/android-facebook-login/interactive.md @@ -1,6 +1,6 @@ --- title: Android – Connexion Facebook -description: Ce tutoriel explique comment ajouter la connexion utilisateur à une application Android à l’aide de la fonction native Facebook Login (Connexion Facebook). +description: Ce tutoriel explique comment ajouter la connexion utilisateur à une application Android à l’aide de la méthode native Connexion Facebook. interactive: true files: - files/performLogin + SimpleCallback @@ -10,49 +10,49 @@ files: - files/exchangeTokens - files/performLogin github: - path: https://github.com/auth0-samples/auth0-android-native-social-sample/tree/master/00-login-facebook + path: 00-login-facebook locale: fr-CA --- # Android – Connexion Facebook -

Ce tutoriel explique comment ajouter la connexion utilisateur à une application Android à l’aide de la fonction native Facebook Login (Connexion Facebook). Nous vous recommandons de vous connecter pour suivre ce guide rapide avec les exemples configurés pour votre compte.

Configuration requise

  • Android Studio 3.6.1

  • Trousse SDK Android 25

  • Émulateur - Nexus 5X - Android 6.0

Ce tutoriel décrit comment mettre en œuvre la connexion avec la trousse SDK Facebook.​

Avant de commencer

Configurez votre application Auth0 dans Dashboard pour utiliser la fonction Facebook Login (Connexion Facebook) en mode natif. Voir Ajouter une connexion Facebook aux applications natives. À la fin de cette étape, votre application sera en mesure d’implémenter la fonction native Facebook Login (Connexion Facebook).

+

Ce tutoriel explique comment ajouter la connexion utilisateur à une application Android à l’aide de la méthode native Connexion Facebook. Nous vous recommandons de vous connecter pour suivre ce démarrage rapide avec les exemples configurés pour votre compte.

Configurations requise

  • Android Studio 3.6.1

  • Trousse SDK Android 25

  • Émulateur - Nexus 5X - Android 6.0

Ce tutoriel décrit comment mettre en œuvre la connexion avec la trousse SDK Facebook.

Avant de commencer

  • Installez et configurez la trousse SDK Connexion Facebook. Vous découvrirez également le processus de création d’une application Facebook sur https://developers.facebook.com. À la fin de cette étape, vous devriez avoir une application mobile fonctionnant avec la fonction de connexion Facebook intégrée.

Configurez votre application Auth0 dans le Dashboard pour utiliser la fonction Connexion Facebook en mode natif. Voir Ajouter une connexion Facebook aux applications natives. À la fin de cette étape, votre application sera en mesure d’implémenter la fonction Connexion Facebook en mode natif.

-## Demande d'autorisations Facebook +## Demande d’autorisations Facebook -

Votre application est déjà capable de se connecter à Facebook. Cependant, pour garantir un profil utilisateur riche, vous devez mettre à jour les autorisations avec lesquelles le bouton de connexion Facebook a été configuré.

Définissez les autorisations demandées sur public_profile et email. De cette manière, l’adresse électronique de l’utilisateur sera également incluse dans la réponse, à condition que la demande d’accès soit acceptée par l’utilisateur.

loginButton.setPermissions(Arrays.asList("public_profile", "email"));

+

Votre application est déjà capable de se connecter à Facebook. Cependant, pour garantir un profil utilisateur riche, vous devez mettre à jour les autorisations avec lesquelles le bouton de connexion Facebook a été configuré.

Définissez les autorisations demandées sur public_profile et email. De cette manière, l’adresse courriel de l’utilisateur sera également incluse dans la réponse, à condition que la demande d’accès soit acceptée par l’utilisateur.

loginButton.setPermissions(Arrays.asList("public_profile", "email"));

## Créer la méthode performLogin {{{ data-action="code" data-code="performLogin + SimpleCallback" }}} -

Pour lancer le processus d’authentification avec Auth0, créez une nouvelle méthode dans laquelle vous préparerez la charge utile à envoyer.

Vous utiliserez une interface simple pour gérer nos callbacks internes.

Dans l’exemple, la méthode s’appelle performLogin et l’interface SimpleCallback. Ajoutez les deux.

+

Maintenant, pour lancer le processus d’authentification avec Auth0, créez une nouvelle méthode où vous préparerez la charge utile à envoyer.

Vous utiliserez une interface simple pour gérer nos rappels internes.

Dans l’exemple, la méthode s’appelle performLogin et l’interface SimpleCallback. Ajoutez les deux.

## Appeler la méthode performLogin {{{ data-action="code" data-code="onCreate" }}} -

Maintenant, appelez la méthode de la méthode onSuccess de callback de connexion à Facebook.

+

Maintenant, appelez la méthode de la méthode onSuccess de rappel (Callback) de connexion Facebook.

## Intégrer Facebook -

Lorsque vous vous connectez à Facebook avec Auth0, l'ordinateur dorsal effectue des vérifications en arrière-plan pour s’assurer que l’utilisateur est bien celui qu’il prétend être. Pour ce faire, il faut lui fournir un jeton d’accès à la session.

En outre, si un utilisateur doit être créé sur Auth0 pour représenter cet utilisateur Facebook, l'ordinateur dorsal aura besoin de certaines de ses informations, comme le nom, le nom de famille et l’adresse électronique. L’adresse électronique, si elle est fournie, sera signalée comme non vérifiée dans le profil utilisateur Auth0.

Pour obtenir le jeton d’accès de session et le profil utilisateur, deux requêtes supplémentaires doivent être effectuées auprès de l’API Facebook.

+

Lorsque vous vous connectez à Facebook avec Auth0, le système dorsal effectue des vérifications en arrière-plan pour s’assurer que l’utilisateur est bien celui qu’il prétend être. Pour ce faire, il faut lui fournir un jeton d’accès à la session.

En outre, si un utilisateur doit être créé sur Auth0 pour représenter cet utilisateur Facebook, le système dorsal aura besoin de certaines de ses informations, comme le nom, le nom de famille et l’adresse électronique. L’adresse électronique, si elle est fournie, sera signalée comme non vérifiée dans le profil utilisateur Auth0.

Pour obtenir le jeton d’accès de session et le profil utilisateur, deux requêtes supplémentaires doivent être effectuées auprès de l’API Facebook.

## Récupérer le jeton d’accès à la session Facebook {{{ data-action="code" data-code="fetchSessionToken" }}} -

Effectuez une nouvelle requête GET vers le point de terminaison /oauth/access_token de l’API Facebook. Utilisez les paramètres de requête suivants :

  • grant_type: fb_attenuate_token.

  • fb_exchange_token: le jeton d’accès reçu lors de la connexion.

  • client_id: l’identificateur de votre application. Cette valeur provient du tableau de bord du développeur Facebook et devrait déjà être utilisée dans votre application si vous avez réussi à intégrer la connexion Facebook.

Placez la logique de cette étape dans sa propre méthode. Vous effectuerez cet appel plus tard, à partir de la méthode ajoutée précédemment.

L’exemple utilise la classe GraphRequest de la trousse SDK Facebook pour effectuer cette demande.

+

Effectuez une nouvelle requête GET vers le point de terminaison /oauth/access_token de l’API Facebook. Utilisez les paramètres de requête suivants :

  • grant_type : fb_attenuate_token.

  • fb_exchange_token : le jeton d’accès reçu lors de la connexion.

  • client_id : l’identifiant de votre application. Cette valeur provient du tableau de bord du développeur Facebook et devrait déjà être utilisée dans votre application si vous avez réussi à intégrer la connexion Facebook.

Placez la logique de cette étape dans sa propre méthode. Vous effectuerez cet appel plus tard, à partir de la méthode ajoutée précédemment.

L’exemple utilise la classe GraphRequest de la trousse SDK Facebook pour effectuer cette demande.

## Récupérer le profil utilisateur Facebook {{{ data-action="code" data-code="fetchUserProfile" }}} -

Effectuez à présent une autre demande GET, comme dans l’étape précédente. Le chemin du point de terminaison correspondra à la valeur de l’identificateur de l’utilisateur figurant dans le résultat de la connexion Facebook (par exemple, /904636746222815). Utilisez les paramètres suivants :

  • access_token : le jeton d’accès reçu lors de la connexion.

  • fields : les champs du profil utilisateur que vous souhaitez récupérer dans la réponse. Ces champs sont directement liés aux autorisations du bouton de connexion Facebook qui ont été configurées au début. Lorsqu’une autorisation est facultative, l’utilisateur doit d’abord consentir à y donner accès. Pour inscrire un utilisateur à Auth0, le nom complet et l’adresse électronique suffisent.

+

Effectuez à présent une autre demande GET, comme dans l’étape précédente. Le chemin du point de terminaison correspondra à la valeur de l’identificateur de l’utilisateur figurant dans le résultat de la connexion Facebook (p. ex., /904636746222815). Utilisez les paramètres suivants :

  • access_token : le jeton d’accès reçu lors de la connexion.

  • fields : les champs du profil utilisateur que vous souhaitez récupérer dans la réponse. Ces champs sont directement liés aux autorisations du bouton de connexion Facebook qui ont été configurées au début. Lorsqu’une autorisation est facultative, l’utilisateur doit d’abord consentir à y donner accès. Pour inscrire un utilisateur à Auth0, le nom complet et l’adresse électronique suffisent.

## Intégrer Auth0 -

Maintenant que les artefacts requis ont été obtenus, vous êtes prêt à les échanger contre les identifiants utilisateur Auth0, comme l’identificateur et les jetons d’accès. Mais d’abord, vous devez configurer la trousse SDK Auth0 pour qu’il effectue cette dernière demande.

Obtenir les clés de votre application

  1. Allez dans la section Applications du Auth0 Dashboard et sélectionnez l’application existante dans laquelle vous avez activé la fonction Sign in with Facebook (Se connecter avec Facebook). Si vous avez besoin d’aide pour cette étape, veuillez consulter la section des exigences en haut de cet article.

  2. Copiez les valeurs Domain (Domaine) et Client ID (Identificateur client) de la page des paramètres de l’application. Ces valeurs sont requises par la trousse SDK.

  3. Créez deux nouvelles ressources dans le fichier strings.xml de votre application Android pour les stocker. Les noms des clés doivent correspondre à ceux utilisés ci-dessous : +

    Maintenant que les artefacts requis ont été obtenus, vous êtes prêt à les échanger contre les identifiants utilisateur Auth0, comme l’identifiant et les jetons d’accès. Mais d’abord, vous devez configurer la trousse SDK Auth0 pour qu’il effectue cette dernière demande.

    Obtenir les clés de votre application

    1. Allez dans la section Applications de Auth0 Dashboard et sélectionnez l’application existante dans laquelle vous avez activé la fonction Sign in with Facebook (Se connecter avec Facebook). Si vous avez besoin d’aide pour cette étape, veuillez consulter la section des exigences en haut de cet article.

    2. Copiez les valeurs Domaine et Identifiant client de la page des paramètres de l’application. Ces valeurs sont requises par la trousse SDK.

    3. Créez deux nouvelles ressources dans le fichier strings.xml de votre application Android pour les stocker. Les noms des clés doivent correspondre à ceux utilisés ci-dessous :

      <resources>
       
      @@ -72,7 +72,7 @@ locale: fr-CA
       
       
      -

      Il est maintenant temps d’exécuter la tâche Gradle Sync pour actualiser le projet et ses dépendances.

      Mise à jour du manifeste pour l’authentification Web

      Si votre application ne prévoit pas d’utiliser le module d’authentification Web fourni par la trousse SDK, vous devrez supprimer l’activité inutilisée du fichier AndroidManifest.xml pour éviter les problèmes liés aux paramètres fictifs dans le manifeste. Pour ce faire, il suffit d’ajouter une déclaration d’activité et de l’annoter avec tools:node="remove".

      <application>
      +

      Il est maintenant temps d’exécuter la tâche Gradle Sync pour actualiser le projet et ses dépendances.

      Mise à jour du manifeste pour l’authentification Web

      Si votre application ne prévoit pas d’utiliser le module d’authentification Web fourni par la trousse SDK, vous devrez supprimer l’activité inutilisée du fichier AndroidManifest.xml pour éviter les problèmes liés au placeholder du manifeste. Pour ce faire, il suffit d’ajouter une déclaration d’activité et de l’annoter avec tools:node="remove".

      <application>
       
         <!-- Add the activity declaration line below -->
       
      @@ -88,12 +88,12 @@ locale: fr-CA
       
       
      -

      Toutefois, si vous envisagez de prendre en charge l’authentification Web, rendez-vous ici pour savoir comment déclarer les paramètres fictifs du manifeste.

      +

      Toutefois, si vous envisagez de prendre en charge l’authentification Web, rendez-vous ici pour savoir comment déclarer les placeholder du manifeste.

      -## Échange des données reçues contre des jetons Auth0 {{{ data-action="code" data-code="exchangeTokens" }}} +## Échanger les données reçues contre des jetons Auth0 {{{ data-action="code" data-code="exchangeTokens" }}} -

      Vous devez instancier la trousse SDK avant de l'utiliser. Définissez un champ au niveau de la classe et initialisez-le dans la méthode onCreate. Remarque : Les identifiants définis à l'étape précédente sont transmis au développeur Auth0 et une nouvelle instance de AuthenticationAPIClient est créée avec lui.

      private AuthenticationAPIClient auth0Client;
      +

      Vous devez instancier la trousse SDK avant de l’utiliser. Définissez un champ au niveau de la classe et initialisez-le dans la méthode onCreate. Remarque : Les identifiants définis à l’étape précédente sont transmis au développeur Auth0 et une nouvelle instance de AuthenticationAPIClient est créée avec lui.

      private AuthenticationAPIClient auth0Client;
       
       
       
      @@ -121,7 +121,7 @@ public void onCreate(Bundle savedInstanceState) {
       
       
      -

      Créez la méthode qui contiendra la logique d'échange des deux artefacts obtenus contre les identifiants de l'utilisateur Auth0. Dans l'exemple, cette méthode s'appelle exchangeTokens.

      Le client de l'API déclare la méthode loginWithNativeSocialToken qui reçoit un jeton et un type de sujet. Le premier correspond au jeton de session et le second indique le type de connexion avec lequel le programme dorsal tentera de s'authentifier.

      Pour la fonction native Connexion Facebook, vous devez utiliser la valeur suivante : "http://auth0.com/oauth/token-type/facebook-info-session-access-token"

      Les autres valeurs à configurer sont le profil utilisateur (en utilisant la clé user_profile) et la permission que vous demandez aux jetons Auth0 de contenir.

      Nous recommandons de conserver toutes les valeurs immuables en tant que constantes au début de la classe. L’exemple utilise des constantes pour le type de jeton sujet, les permissions Facebook et les permissions Auth0. Pour en savoir plus sur les permissions Auth0, lisez cet article.

      +

      Créez la méthode qui contiendra la logique d’échange des deux artefacts obtenus contre les identifiants de l’utilisateur Auth0. Dans l’exemple, cette méthode s’appelle exchangeTokens.

      Le client de l’API déclare la méthode loginWithNativeSocialToken qui reçoit un jeton et un type de sujet. Le premier correspond au jeton de session et le second indique le type de connexion avec lequel le système dorsal tentera de s’authentifier.

      Pour la fonction native Connexion Facebook, vous devez utiliser la valeur suivante : "http://auth0.com/oauth/token-type/facebook-info-session-access-token"

      Les autres valeurs à configurer sont le profil utilisateur (en utilisant la clé user_profile) et la permission que vous demandez aux jetons Auth0 de contenir.

      Nous recommandons de conserver toutes les valeurs immuables en tant que constantes au début de la classe. L’exemple utilise des constantes pour le type de jeton sujet, les permissions Facebook et les permissions Auth0. Pour en savoir plus sur les permissions Auth0, lisez cet article.

      ## Mettre à jour la méthode performLogin {{{ data-action="code" data-code="performLogin" }}} diff --git a/fr-ca/articles/quickstart/native/android/interactive.md b/fr-ca/articles/quickstart/native/android/interactive.md index d61de9c19a..e6755bc034 100644 --- a/fr-ca/articles/quickstart/native/android/interactive.md +++ b/fr-ca/articles/quickstart/native/android/interactive.md @@ -7,7 +7,7 @@ files: - files/strings - files/MainActivity github: - path: https://github.com/auth0-samples/auth0-android-sample/tree/master/00-Login-Kt + path: 00-Login-Kt locale: fr-CA --- @@ -16,15 +16,15 @@ locale: fr-CA

      -## Configurer Auth0 +## Configuration d’Auth0 -

      Pour utiliser les services Auth0, vous devez avoir une application installée dans Auth0 Dashboard. Vous allez configurer l’authentification pour votre projet dans l’application Auth0.

      Configurer une application

      Utilisez le sélecteur interactif pour créer une nouvelle application Auth0 ou sélectionner une application existante qui représente le projet avec lequel vous souhaitez vous intégrer. Dans Auth0, il est attribué à chaque application un identificateur client unique alphanumérique que votre code d’application utilisera pour appeler les API Auth0 via la trousse SDK.

      Tous les paramètres que vous configurez à l’aide de ce guide rapide seront automatiquement mis à jour pour votre application dans le Dashboard, qui vous permettra de gérer vos applications.

      Consultez un exemple d’application si vous préférez explorer une configuration complète.

      Configuration des Callback URL

      Une Callback URL est l’URL de l’application vers laquelle Auth0 dirigera vos utilisateurs une fois qu’ils se seront authentifiés. Si vous ne définissez pas cette valeur, Auth0 ne renverra pas les utilisateurs vers votre application après leur connexion.

      Si vous suivez notre projet à titre d’exemple, définissez ceci sur demo://{yourDomain}/android/YOUR_APP_PACKAGE_NAME/callback.

      Configuration des URL de déconnexion

      Une URL de déconnexion est l’URL de l’application vers laquelle Auth0 redirigera vos utilisateurs une fois qu’ils se seront déconnectés. Si vous ne définissez pas cette valeur, les utilisateurs ne pourront pas se déconnecter de votre application et recevront un message d’erreur.

      Si vous suivez notre projet à titre d’exemple, définissez ceci sur demo://{yourDomain}/android/YOUR_APP_PACKAGE_NAME/callback

      +

      Pour utiliser les services Auth0, vous devez avoir une application installée dans Auth0 Dashboard. L’application Auth0 est l’endroit où vous allez configurer l’authentification pour votre projet.

      Configurer une application

      Utilisez le sélecteur interactif pour créer une nouvelle application Auth0 ou sélectionner une application existante qui représente le projet avec lequel vous souhaitez effectuer l’intégration. Dans Auth0, chaque application se voit attribuer un identifiant client unique alphanumérique que votre code d’application utilisera pour appeler les API Auth0 via la trousse SDK.

      Tous les paramètres que vous configurez à l’aide de ce guide de démarrage rapide seront automatiquement mis à jour pour votre application dans le Tableau de bord, qui est l’endroit où vous pourrez gérer vos applications à l’avenir.

      Si vous préférez explorer une configuration complète, consultez plutôt un exemple d’application.

      Configuration des URL de rappel

      Une URL de rappel est l’URL de l’application vers laquelle Auth0 dirigera vos utilisateurs une fois qu’ils se seront authentifiés. Si vous ne définissez pas cette valeur, Auth0 ne renverra pas les utilisateurs vers votre application après leur connexion.

      Si vous suivez notre projet à titre d’exemple, définissez ceci sur demo://{yourDomain}/android/YOUR_APP_PACKAGE_NAME/callback.

      Configuration des URL de déconnexion

      Une URL de déconnexion est l’URL de l’application vers laquelle Auth0 redirigera vos utilisateurs une fois qu’ils se seront déconnectés. Si vous ne définissez pas cette valeur, les utilisateurs ne pourront pas se déconnecter de votre application et recevront un message d’erreur.

      Si vous suivez notre projet à titre d’exemple, définissez ceci sur demo://{yourDomain}/android/YOUR_APP_PACKAGE_NAME/callback

      ## Installer la trousse SDK Android Auth0 {{{ data-action="code" data-code="build.gradle#18:18" }}} -

      Ajoutez la trousse SDK Android Auth0 à votre projet. La bibliothèque adressera des demandes aux Authentication et Management API d’Auth0.

      Dans la section dépendances du build.gradle de votre application, ajoutez ce qui suit :

      implementation 'com.auth0.android:auth0:2. '
      +

      Ajoutez la trousse SDK Android Auth0 à votre projet. La bibliothèque adressera des demandes aux Authentication et Management API d’Auth0.

      Dans la section dépendances du build.gradle de votre application, ajoutez ce qui suit :

      implementation 'com.auth0.android:auth0:2. '
       
       
      @@ -33,46 +33,46 @@ locale: fr-CA ## Ajouter des paramètres fictifs dans le manifeste {{{ data-action="code" data-code="build.gradle#10:12" }}} -

      La trousse SDK nécessite des espaces réservés dans le manifeste. Auth0 utilise des espaces réservés en interne pour définir un intent-filter, qui capture la Callback URL d’authentification. Vous devez définir le domaine du locataire Auth0 et le schéma de la Callback URL.

      Vous n’avez pas besoin de déclarer un intent-filter spécifique pour votre activité car vous avez défini les paramètres fictifs dans le manifeste avec vos valeurs Auth0 Domaine et Schéma et la bibliothèque traitera la redirection pour vous.

      Nous avons utilisé la valeur demo pour auth0Scheme ici, afin qu’un schéma d’URL personnalisé puisse être utilisé pour l’URL vers laquelle Auth0 redirige après la connexion. L’alternative est https si vous voulez utiliser des liens vers les applications Android. Vous pouvez en savoir plus sur la définition de cette valeur dans le SDK README d’Auth0.Android.

      +

      La trousse SDK nécessite des paramètres fictifs dans le manifeste. Auth0 utilise des paramètres fictifs en interne pour définir un intent-filter, qui capture l’URL de rappel pour l’authentification. Vous devez définir le domaine du locataire Auth0 et le schéma de l’URL de rappel.

      Vous n’avez pas besoin de déclarer un intent-filter spécifique pour votre activité car vous avez défini les paramètres fictifs dans le manifeste avec vos valeurs Auth0 Domaine et Schéma et la bibliothèque traitera la redirection pour vous.

      Nous avons utilisé la valeur demo pour auth0Scheme ici, afin qu’un schéma d’URL personnalisé puisse être utilisé pour l’URL vers laquelle Auth0 redirige après la connexion. L’alternative est https si vous voulez utiliser des liens vers les applications Android. Vous pouvez en savoir plus sur la définition de cette valeur dans le SDK README d’Auth0.Android.

      ## Configuration de votre application {{{ data-action="code" data-code="strings.xml#2:3" }}} -

      Pour que la trousse SDK fonctionne correctement, définissez les propriétés suivantes dans strings.xml :

      • com_auth0_domain: le domaine de votre locataire Auth0. En général, vous le trouvez dans Auth0 Dashboard sous vos paramètres d’application dans le champ Domain (Domaine). Si vous utilisez un domaine personnalisé, définissez-le plutôt sur la valeur de votre domaine personnalisé.

      • com_auth0_client_id: identificateur de l’application Auth0 que vous avez configurée précédemment dans ce guide rapide. Vous pouvez la trouver dans Auth0 Dashboard, dans la rubrique des paramètres de votre application, dans le champ Client ID..

      Assurez-vous que le fichier AndroidManifest.xml spécifie l’autorisation android.permissions.INTERNET :

      <uses-permission android:name="android.permission.INTERNET" />
      +

      Pour que la trousse SDK fonctionne correctement, définissez les propriétés suivantes dans strings.xml :

      • com_auth0_domain : Le domaine de votre locataire Auth0. En général, vous le trouvez dans Auth0 Dashboard sous vos paramètres d’application dans le champ Domain (Domaine). Si vous utilisez un domaine personnalisé, définissez-le plutôt sur la valeur de votre domaine personnalisé.

      • com_auth0_client_id : l’identificateur de l’application Auth0 que vous avez configurée précédemment dans ce guide rapide. Vous pouvez le trouver dans Auth0 Dashboard, dans les paramètres de votre application, dans le champ Client ID (ID client).

      Assurez-vous que le fichier AndroidManifest.xml spécifie l’autorisation android.permissions.INTERNET :

      <uses-permission android:name="android.permission.INTERNET" />
       
       
      -

      Exécutez Sync Project with Gradle Files dans Android Studio ou exécutez ./gradlew clean assembleDebug à partir de la ligne de commande.

      Pour en savoir plus sur l’utilisation de Gradle, consultez la documentation officielle de Gradle.

      +

      Exécutez Sync Project with Gradle Files dans Android Studio ou exécutez ./gradlew clean assembleDebug à partir de la ligne de commande.

      Pour en savoir plus sur l’utilisation de Gradle, consultez la documentation officielle de Gradle.

      ## Ajouter une fonctionnalité de connexion à votre application {{{ data-action="code" data-code="MainActivity.kt#6:38" }}} -

      La connexion universelle est le moyen le plus simple de mettre en place l’authentification dans votre application. Nous recommandons de l’utiliser pour une meilleure expérience, une meilleure sécurité et un plus grand nombre de fonctionnalités.

      Dans la méthode onCreate, créez une nouvelle instance de la classe Auth0 qui contiendra les informations d’identification de l’utilisateur.

      Créez une méthode loginWithBrowser et utilisez la classe WebAuthProvider pour vous authentifier avec n’importe quelle connexion que vous avez activée sur votre application dans Auth0 dashboard. Ici, vous pouvez passer la valeur du schéma qui a été utilisée dans l’espace réservé du manifeste auth0Scheme dans le cadre de la configuration initiale.

      Après avoir appelé la fonction WebAuthProvider#start, le navigateur se lance et affiche la page de connexion. Une fois l’utilisateur authentifié, la Callback URL est appelée. La Callback URL contient le résultat final du processus d’authentification.

      Guide rapide Android - Étape 5 - Point de contrôle

      Ajoutez un bouton à votre application qui appelle loginWithBrowser. Lorsque vous cliquez dessus, vérifiez que votre application Android vous redirige vers la page de connexion universelle Auth0 et que vous pouvez maintenant vous connecter ou vous inscrire en utilisant un nom d’utilisateur et un mot de passe, ou encore un réseau social.

      Une fois l’opération terminée, vérifiez qu’Auth0 vous redirige vers votre application.

      +

      La connexion universelle est le moyen le plus simple de mettre en place l’authentification dans votre application. Nous recommandons de l’utiliser pour une meilleure expérience, une meilleure sécurité et un plus grand nombre de fonctionnalités.

      Dans la méthode onCreate, créez une nouvelle instance de la classe Auth0 qui contiendra les informations d’identification de l’utilisateur.

      Créez une méthode loginWithBrowser et utilisez la classe WebAuthProvider pour vous authentifier avec n’importe quelle connexion que vous avez activée sur votre application dans Auth0 Dashboard. Ici, vous pouvez passer la valeur du schéma qui a été utilisée dans le paramètre fictif du manifeste auth0Scheme dans le cadre de la configuration initiale.

      Après avoir appelé la fonction WebAuthProvider#start, le navigateur se lance et affiche la page de connexion. Une fois l’utilisateur authentifié, l’URL de rappel est appelée. L’URL de rappel contient le résultat final du processus d’authentification.

      Démarrage rapide Android – Étape 5 – Point de contrôle

      Ajoutez un bouton à votre application qui appelle loginWithBrowser. Lorsque vous cliquez dessus, vérifiez que votre application Next.js vous redirige vers la page Connexion universelle Auth0 et que vous pouvez maintenant vous connecter ou vous inscrire en utilisant un nom d’utilisateur et un mot de passe ou un fournisseur social.

      Une fois l’opération terminée, vérifiez qu’Auth0 vous redirige vers votre application.

      -

      If your application did not launch successfully:

      • Ensure you set the Allowed Callback URLs are correct

      • Verify you saved your changes after entering your URLs

      • Make sure the domain and cliend ID values imported correctly

      Still having issues? Check out our documentation or visit our community page to get more help.

      +

      Si le lancement de votre application a échoué :

      • Assurez-vous que les URL de rappel autorisées sont correctes

      • Vérifiez que vous avez enregistré vos modifications après avoir saisi vos URL

      • Assurez-vous que les valeurs de domaine et d’identifiant client ont été importées correctement

      Vous rencontrez toujours des problèmes? Consultez notre documentation ou la page de notre communauté pour obtenir de l’aide.

      ## Ajouter une fonctionnalité de déconnexion à votre application {{{ data-action="code" data-code="MainActivity.kt#40:52" }}} -

      Utilisez WebAuthProvider pour supprimer le témoin défini par le navigateur au moment de l’authentification, de sorte que les utilisateurs soient obligés de saisir à nouveau leurs identifiants la prochaine fois qu’ils essaient de s’authentifier.

      Ajoutez une méthode logout à votre application pour supprimer la session de l’utilisateur et le déconnecter de l’application. Ici, vous pouvez passer la valeur du schéma qui a été utilisée dans le paramètre fictif du manifeste auth0Scheme dans le cadre de la configuration initiale.

      Utilisez la classe WebAuthProvider pour mettre en œuvre la déconnexion. Cet appel ouvre le navigateur et dirige l’utilisateur vers le point de terminaison de déconnexion. Si l’utilisateur annule la déconnexion, envisagez de le rediriger vers l’URL précédente.

      Guide rapide Android - Étape 6 - Point de contrôle

      Ajoutez un bouton à votre application qui appelle logout et déconnecte l’utilisateur de votre application. Lorsque vous cliquez sur ce bouton, vérifiez que votre application Android vous redirige vers la page de déconnexion et vous renvoie, et que vous n’êtes plus connecté à votre application.

      +

      Utilisez WebAuthProvider pour supprimer le témoin défini par le navigateur au moment de l’authentification, de sorte que les utilisateurs soient obligés de saisir à nouveau leurs identifiants la prochaine fois qu’ils essaient de s’authentifier.

      Ajoutez une méthode logout à votre application pour supprimer la session de l’utilisateur et le déconnecter de l’application. Ici, vous pouvez passer la valeur du schéma qui a été utilisée dans le placeholder du manifeste auth0Scheme dans le cadre de la configuration initiale.

      Utilisez la classe WebAuthProvider pour mettre en œuvre la déconnexion. Cet appel ouvre le navigateur et dirige l’utilisateur vers le point de terminaison de déconnexion. Si l’utilisateur annule la déconnexion, envisagez de le rediriger vers l’URL précédente.

      Démarrage rapide Android - Étape 6 - Point de contrôle

      Ajoutez un bouton à votre application qui appelle logout et déconnecte l’utilisateur de votre application. Lorsque vous cliquez sur ce bouton, vérifiez que votre application Android vous redirige vers la page de déconnexion et vous renvoie, et que vous n’êtes plus connecté à votre application.

      -

      If your application did not logout successfully:

      • Ensure the Allowed Logout URLs are set properly

      • Verify you saved your changes after entering your URLs

      Still having issues? Check out our documentation or visit our community page to get more help.

      +

      Si votre application n’a pas réussi à se déconnecter :

      • Assurez-vous que les URL de déconnexion autorisées sont correctement définies

      • Vérifiez que vous avez enregistré vos modifications après avoir saisi vos URL

      Vous rencontrez toujours des problèmes? Consultez notre documentation ou la page de notre communauté pour obtenir de l’aide.

      ## Afficher les informations du profil utilisateur {{{ data-action="code" data-code="MainActivity.kt#54:70" }}} -

      Utilisez la classe AuthenticationAPIClient pour récupérer le profil utilisateur auprès de Auth0. Pour ce faire, les éléments suivants sont nécessaires :

      • Le jeton d’accès renvoyé par la phase de connexion

      • Le WebAuthProvider.login doit contenir la permission profile

      Vous devez spécifier la permission email si vous avez besoin de récupérer l’adresse électronique de l’utilisateur.

      Ce guide rapide définit par défaut les permissions openid profile email lors de l’étape de connexion ci-dessus.

      L’exemple suivant démontre une fonction qui peut être utilisée pour récupérer le profil utilisateur et l’afficher à l’écran :

      Guide rapide Android - Étape 7 - Point de contrôle

      Appelez la fonction showUserProfile après la connexion. Vérifiez que le callback onSuccess renvoie les informations du profil utilisateur.

      +

      Utilisez la classe AuthenticationAPIClient pour récupérer le profil utilisateur auprès de Auth0. Pour ce faire, les éléments suivants sont nécessaires :

      • Le jeton d’accès renvoyé par la phase de connexion

      • Le WebAuthProvider.login doit contenir la permission profile

      Vous devez spécifier la permission email si vous avez besoin de récupérer l’adresse courriel de l’utilisateur.

      Ce guide rapide définit par défaut les permissions openid profile email lors de l’étape de connexion ci-dessus.

      L’exemple suivant démontre une fonction qui peut être utilisée pour récupérer le profil utilisateur et l’afficher à l’écran :

      Guide rapide Android - Étape 7 - Point de contrôle

      Appelez la fonction showUserProfile après la connexion. Vérifiez que le rappel onSuccess renvoie les informations du profil utilisateur.

      -

      If your application did not return user profile information:

      • Verify the accessToken is valid

      Still having issues? Check out our documentation or visit our community page to get more help.

      +

      Si votre application n’a pas renvoyé d’informations sur le profil utilisateur :

      • Vérifiez la validité du jeton d’accès

      Vous rencontrez toujours des problèmes? Consultez notre documentation ou la page de notre communauté pour obtenir de l’aide.

      diff --git a/fr-ca/articles/quickstart/native/device/interactive.md b/fr-ca/articles/quickstart/native/device/interactive.md index 31af025984..199f614a88 100644 --- a/fr-ca/articles/quickstart/native/device/interactive.md +++ b/fr-ca/articles/quickstart/native/device/interactive.md @@ -1,42 +1,40 @@ --- -title: Flux d’autorisation de l’appareil -description: Ce tutoriel explique comment appeler votre API à partir d’un appareil dont les entrées sont limitées, à l’aide du flux d’autorisation de l’appareil. +title: Flux d’autorisation d’appareil +description: Ce tutoriel explique comment appeler votre API à partir d’un appareil dont les entrées sont limitées, à l’aide du flux d’autorisation d’appareil. interactive: true -github: - path: https://auth0.github.io/device-flow-playground/ locale: fr-CA --- -# Flux d’autorisation de l’appareil +# Flux d’autorisation d’appareil -

      Ce tutoriel explique comment appeler votre API à partir d’un appareil dont les entrées sont limitées, à l’aide du flux d’autorisation de l’appareil. Nous vous recommandons de vous connecter pour suivre ce démarrage rapide avec les exemples configurés pour votre compte.

      Pour une expérience interactive, vous pouvez utiliser Terrain de jeu du flux de l’appareil.

      Prérequis

      +

      Ce tutoriel explique comment appeler votre API à partir d’un appareil dont les entrées sont limitées, à l’aide du flux d’autorisation d’appareil. Nous vous recommandons de vous connecter pour suivre ce démarrage rapide avec les exemples configurés pour votre compte.

      Pour une expérience interactive, vous pouvez utiliser Terrain de jeu du flux d’appareil.

      Conditions requises

      ## Recevoir le code de l’appareil -

      Lorsque l’utilisateur démarre l’application de l’appareil et souhaite l’autoriser, votre application doit demander un code d’appareil à Auth0 Authentication API pour l’associer à la session de l’utilisateur.

      Pour obtenir le code de l’appareil, votre application doit appeler le point de terminaison d’autorisation de Authentication API du flux d’autorisation de l’appareil :

      
      +

      Lorsque l’utilisateur démarre l’application de l’appareil et souhaite l’autoriser, votre application doit demander un code d’appareil à Auth0 Authentication API pour l’associer à la session de l’utilisateur.

      Pour obtenir le code de l’appareil, votre application doit appeler le Authorize endpoint (Point de terminaison d’autorisation) d’Authentication API du flux d’autorisation de l’appareil :

      
       
       
      - + -
      curl --request post \
      +  
      curl --request post \
       
         --url 'https://${account.namespace}/oauth/device/code' \
       
      -  --header 'content-type: application/x-www-form-urlencoded'
      var client = new RestClient("https://${account.namespace}/oauth/device/code");
      +  --header 'content-type: application/x-www-form-urlencoded'
      var client = new RestClient("https://${account.namespace}/oauth/device/code");
       
       var request = new RestRequest(Method.POST);
       
       request.AddHeader("content-type", "application/x-www-form-urlencoded");
       
      -IRestResponse response = client.Execute(request);
      package main
      +IRestResponse response = client.Execute(request);
      package main
       
       
       
      @@ -84,11 +82,11 @@ func main() {
       
       
       
      -}
      HttpResponse<String> response = Unirest.post("https://${account.namespace}/oauth/device/code")
      +}
      HttpResponse<String> response = Unirest.post("https://${account.namespace}/oauth/device/code")
       
         .header("content-type", "application/x-www-form-urlencoded")
       
      -  .asString();
      var axios = require("axios").default;
      +  .asString();
      var axios = require("axios").default;
       
       
       
      @@ -112,7 +110,7 @@ axios.request(options).then(function (response) {
       
         console.error(error);
       
      -});
      #import <Foundation/Foundation.h>
      +});
      #import <Foundation/Foundation.h>
       
       
       
      @@ -152,7 +150,7 @@ NSURLSessionDataTask *dataTask = [session dataTaskWithRequest:request
       
                                                   }];
       
      -[dataTask resume];
      $curl = curl_init();
      +[dataTask resume];
      $curl = curl_init();
       
       
       
      @@ -200,7 +198,7 @@ if ($err) {
       
         echo $response;
       
      -}
      import http.client
      +}
      import http.client
       
       
       
      @@ -222,7 +220,7 @@ data = res.read()
       
       
       
      -print(data.decode("utf-8"))
      require 'uri'
      +print(data.decode("utf-8"))
      require 'uri'
       
       require 'net/http'
       
      @@ -250,7 +248,7 @@ request["content-type"] = 'application/x-www-form-urlencoded'
       
       response = http.request(request)
       
      -puts response.read_body
      import Foundation
      +puts response.read_body
      import Foundation
       
       
       
      @@ -327,7 +325,7 @@ dataTask.resume()
      ## Interrogation du point de terminaison du jeton -

      Pendant que votre application attend que l’utilisateur l’active, elle doit appeler le point de terminaison POST /oauth/token de Authentication API de manière intermittente et traiter la réponse de manière appropriée.

      Assurez-vous que votre application attend la durée de interval (en secondes) ou jusqu’à ce qu’elle reçoive une réponse positive, la durée la plus longue étant retenue, afin d’éviter les problèmes de latence du réseau.

      curl --request POST \ 
      +

      Pendant que votre application attend que l’utilisateur l’active, elle doit appeler le point de terminaison POST /oauth/token d’Authentication API de manière intermittente et traiter la réponse de manière appropriée.

      Assurez-vous que votre application attend la durée de interval (en secondes) ou jusqu’à ce qu’elle reçoive une réponse positive, la durée la plus longue étant retenue, afin d’éviter les problèmes de latence du réseau.

      curl --request POST \ 
       
       --url 'https://${account.namespace}/oauth/token' \ 
       
      @@ -346,7 +344,7 @@ dataTask.resume()
      ## Autorisation de l’utilisateur -

      L’utilisateur peut soit balayer le code QR, soit ouvrir la page d’activation et saisir le code d’utilisateur :

      null

      Une page de confirmation s’affiche pour que l’utilisateur confirme qu’il s’agit du bon appareil :

      null

      L’utilisateur terminera la transaction en se connectant. Cette étape peut comprendre un ou plusieurs des procédés suivant :

      • Authentifier l’utilisateur

      • Redirection de l’utilisateur vers un fournisseur d’identité pour gérer l’authentification

      • Vérification des sessions actives d’authentification unique (SSO)

      • Obtenir le consentement de l’utilisateur pour l’appareil, à moins qu’il n’ait été donné au préalable.

      null

      Une fois l’authentification et le consentement obtenus, la demande de confirmation s’affiche :

      null

      À ce stade, l’utilisateur s’est authentifié et l’appareil a été autorisé.

      +

      L’utilisateur peut soit balayer le code QR, soit ouvrir la page d’activation et saisir le code d’utilisateur :

      null

      Une page de confirmation s’affiche pour que l’utilisateur confirme qu’il s’agit du bon appareil :

      null

      L’utilisateur terminera la transaction en se connectant. Cette étape peut comprendre un ou plusieurs des procédés suivant :

      • Authentifier l’utilisateur

      • Redirection de l’utilisateur vers un fournisseur d’identité pour gérer l’authentification

      • Vérification des sessions actives d’authentification unique (SSO)

      • Obtenir le consentement de l’utilisateur pour l’appareil, à moins qu’il n’ait été donné au préalable

      null

      Une fois l’authentification et le consentement obtenus, la demande de confirmation s’affiche :

      null

      À ce stade, l’utilisateur s’est authentifié et l’appareil a été autorisé.

      ## Recevoir les jetons @@ -367,12 +365,12 @@ dataTask.resume()
-

Vous devez valider vos jetons avant de les enregistrer. Pour en savoir plus, consultez Validation des jetons d’accès et Validation des jetons d’ID.

Les jetons d’accès sont utilisés pour appeler le point de terminaison Get User Info de Authentication API (si l’application de votre appareil a demandé la permission openid) ou l’API définie par le paramètre audience. Si vous appelez votre propre API, votre application doit vérifier le jeton d’accès avant de l’utiliser.

Les jetons d’ID contiennent des informations sur l’utilisateur qui doivent être décodées et extraites. Authentication API ne renvoie un id_token que si l’application de votre appareil a demandé la permission openid.

Les jetons d’actualisation sont utilisés pour obtenir un nouveau jeton d’accès ou un nouveau jeton d’ID après l’expiration du précédent. Authentication API ne renvoie un refresh_token que si le paramètre Allow Offline Access (Autoriser l’accès hors ligne) est activé pour l’API indiquée par le paramètre audience et que l’application de votre appareil a demandé la permission offline_access.

+

Vous devez valider vos jetons avant de les enregistrer. Pour en savoir plus, consultez Valider les jetons d’accès et Valider les jetons d’ID.

Les jetons d’accès sont utilisés pour appeler le point de terminaison Get User Info de Authentication API (si l’application de votre appareil a demandé la permission openid) ou l’API définie par le paramètre audience. Si vous appelez votre propre API, votre application doit vérifier le jeton d’accès avant de l’utiliser.

Les jetons d’ID contiennent des informations sur l’utilisateur qui doivent être décodées et extraites. Authentication API ne renvoie un id_token que si l’application de votre appareil a demandé la permission openid.

Les jetons d’actualisation sont utilisés pour obtenir un nouveau jeton d’accès ou un nouveau jeton d’ID après l’expiration du précédent. Authentication API ne renvoie un refresh_token que si le paramètre Autoriser l’accès hors ligne est activé pour l’API indiquée par le paramètre public et que l’application de votre appareil a demandé la permission offline_access.

## Appeler votre API -

Pour appeler votre API, votre application doit transmettre le jeton d’accès en tant que jeton du porteur dans l’en-tête Authorization de votre requête HTTP.

curl --request GET \
+

Pour appeler votre API, votre application doit transmettre le jeton d’accès en tant que jeton de porteur dans l’en-tête Authorization de votre requête HTTP.

curl --request GET \
 
   --url https://myapi.com/api \
 
@@ -387,7 +385,7 @@ dataTask.resume()
## Jetons d’actualisation -

Pour obtenir un nouveau jeton d’accès pour un utilisateur, votre application peut appeler le point de terminaison POST /oauth/token de Authentication API avec le paramètre refresh_token.

curl --request POST \
+

Pour obtenir un nouveau jeton d’accès pour un utilisateur, l’application de votre appareil peut appeler le point de terminaison POST /oauth/token de l’API d’authentication avec le paramètre refresh_token.

curl --request POST \
 
   --url 'https://${account.namespace}/oauth/token' \
 
@@ -419,12 +417,12 @@ dataTask.resume()
-

Pour en savoir plus sur les jetons d’actualisation, consultez Jetons d’actualisation.

+

Pour en savoir plus sur les jetons d’actualisation, veuillez consulter Jetons d’actualisation.

## Dépannage -

Les journaux de locataires sont créés pour toutes les interactions qui ont lieu et peuvent être utilisés pour résoudre les problèmes.

+

Les journaux de locataires sont créés pour toutes les interactions qui ont lieu et peuvent être utilisés pour résoudre les problèmes.

@@ -520,7 +518,7 @@ dataTask.resume() -

Jeton expiré

L’utilisateur n’a pas autorisé l’appareil assez rapidement, le device_code a donc expiré. Votre application doit avertir l’utilisateur que le flux a expiré et l’inviter à le réinitialiser.

Le expired_token n’est renvoyé qu’une seule fois. Ensuite, le point de terminaison renvoie l’erreur invalid_grant.

`HTTP 403`
+

Jeton expiré

L’utilisateur n’a pas autorisé l’appareil assez rapidement, par conséquent le device_code a expiré. Votre application doit avertir l’utilisateur que le flux a expiré et l’inviter à le réinitialiser.

Le expired_token n’est renvoyé qu’une seule fois. Ensuite, le point de terminaison renvoie l’erreur invalid_grant.

`HTTP 403`
 
 
 
@@ -548,14 +546,14 @@ dataTask.resume()
-

Cela peut se produire pour diverses raisons, notamment :

  • L’utilisateur a refusé d’autoriser l’appareil.

  • Le serveur d’autorisation a refusé la transaction.

  • Une Action configurée a refusé l’accès.

+

Cela peut se produire pour diverses raisons, notamment :

  • l’utilisateur a refusé d’autoriser l’appareil,

  • le serveur d’autorisation a refusé la transaction.

  • Une Action configurée a refusé l’accès.

## Exemples de mises en œuvre -

Consultez les exemples ci-dessous pour savoir comment mettre en œuvre ce flux dans des applications réelles.

  • Terrain de jeu du flux de l’appareil

  • AppleTV (Swift) : application simple qui montre comment Auth0 peut être utilisé avec le flux d’autorisation d’un appareil AppleTV.

  • CLI (Node.js) : exemple de mise en œuvre d’une CLI qui utilise le flux d’autorisation de l’appareil au lieu du flux du code d’autorisation. La principale différence est que votre CLI n’a pas besoin d’héberger un serveur Web et d’écouter sur un port.

+

Consultez les exemples ci-dessous pour savoir comment mettre en œuvre ce flux dans des applications réelles.

  • Terrain de jeu du flux de l’appareil

  • AppleTV (Swift) : application simple qui montre comment Auth0 peut être utilisé avec le flux d’autorisation d’un appareil AppleTV.

  • CLI (Node.js) : exemple de mise en œuvre d’une CLI qui utilise le flux d’autorisation de l’appareil au lieu du flux du code d’autorisation. La principale différence est que votre CLI n’a pas besoin d’héberger un serveur Web et d’écouter sur un port.

## Limites -

Pour utiliser le flux d’autorisation de l’appareil, l’application de l’appareil doit :

En outre, le flux d’autorisation de l’appareil ne permet pas :

+

Pour utiliser le flux d’autorisation de l’appareil, l’application de l’appareil doit :

En outre, le flux d’autorisation de l’appareil ne permet pas :

diff --git a/fr-ca/articles/quickstart/native/flutter/interactive.md b/fr-ca/articles/quickstart/native/flutter/interactive.md index 34dac73071..1adde93134 100644 --- a/fr-ca/articles/quickstart/native/flutter/interactive.md +++ b/fr-ca/articles/quickstart/native/flutter/interactive.md @@ -7,64 +7,70 @@ files: - files/main_view - files/profile_view github: - path: https://github.com/auth0-samples/auth0-flutter-samples/tree/main/sample + path: sample locale: fr-CA --- # Ajouter une fonctionnalité de connexion à votre application Flutter -

Auth0 vous permet d’ajouter rapidement l’authentification et d'accéder aux informations de profil utilisateur dans votre application. Ce guide explique comment intégrer Auth0 avec une application Flutter à l’aide de la trousse SDK Flutter Auth0.

La trousse SDK Flutter ne prend actuellement en charge que les applications Flutter pour Android, iOS et macOS.

Ce guide rapide suppose que vous avez déjà une application Flutter installée et active. Si ce n'est pas le cas, consultez les guides "Getting started" de Flutter pour commencer avec une application simple.

Vous devez également être familiarisé avec Outil de ligne de commande Flutter.

+

Auth0 vous permet d’ajouter rapidement l’authentification et d’accéder aux informations relatives au profil de l’utilisateur dans votre application. Ce guide explique comment intégrer Auth0 à une application Flutter à l’aide de la trousse SDK Flutter Auth0.

La trousse SDK Flutter ne prend actuellement en charge que les applications Flutter pour Android, iOS et macOS.

Ce guide de démarrage rapide suppose que vous avez déjà une application Flutter installée et active. Si ce n’est pas le cas, consultez les guides « Getting started » (Premiers pas) de Flutter pour commencer avec une application simple.

Vous devez également être familiarisé avec Outil de ligne de commande Flutter.

-## Configurer Auth0 +## Configuration d’Auth0 -

Pour utiliser les services Auth0, vous devez avoir une application installée dans Auth0 Dashboard. L’application Auth0 est l’endroit où vous allez configurer l’authentification pour votre projet.

Configurer une application Auth0

Utilisez le sélecteur interactif pour créer une nouvelle application Auth0 ou sélectionner une application Auth0 Native existante. Dans Auth0, il est attribué à chaque application un identificateur client unique alphanumérique que votre code d’application utilisera pour appeler les API Auth0 via la trousse SDK.

Tous les paramètres que vous configurez à l’aide de ce guide rapide seront automatiquement mis à jour pour votre application dans le Dashboard, où vous pourrez gérer vos applications à l’avenir.

Si vous préférez explorer une configuration complète, consultez un exemple d'application.

Configurer les URL Callback et les URL de déconnexion

Les URL Callback et les URL de déconnexion sont les URL que Auth0 appelle pour rediriger vers votre application. Auth0 fait appel à la URL Callback après avoir authentifié l’utilisateur et à l’URL de déconnexion après avoir supprimé le témoin de session. Si les URL Callback et de déconnexion ne sont pas définies, les utilisateurs ne pourront pas se connecter ou se déconnecter de l’application et recevront une erreur.

Définissez les URCallback et de déconnexion sur les valeurs suivantes, en fonction de votre plateforme.

Sur Android, la valeur du paramètre fictif SCHEME peut être https ou un autre schéma personnalisé. Les schémas https nécessitent l’activation des liens d’application Android.

Sur iOS 17.4+ et macOS 14.4+, il est possible d’utiliser des liens universels (https) comme URL Callback et de déconnexion. Lorsqu’activé, la trousse SDK reviendra à l’utilisation d’un schéma d’URL personnalisé sur les anciennes versions iOS/MacOS – l’identificateur de bundlede votre application. Cette fonctionnalité nécessite un Xcode 15.3+ et un compte Apple Developer payant.

Android

SCHEME://{yourDomain}/android/YOUR_PACKAGE_NAME/callback

iOS

https://{yourDomain}/ios/YOUR_BUNDLE_IDENTIFIER/callback, YOUR_BUNDLE_IDENTIFIER://{yourDomain}/ios/YOUR_BUNDLE_IDENTIFIER/callback

macOS

https://{yourDomain}/macos/YOUR_BUNDLE_IDENTIFIER/callback, YOUR_BUNDLE_IDENTIFIER://{yourDomain}/macos/YOUR_BUNDLE_IDENTIFIER/callback

Par exemple, si l’identifiant de votre bundle iOS était com.example.MyApp et votre domaine Auth0 était example.us.auth0.com, alors cette valeur serait :

https://example.us.auth0.com/ios/com.example.MyApp/callback, com.example.MyApp://example.us.auth0.com/ios/com.example.MyApp/callback

+

Pour utiliser les services Auth0, vous devez avoir une application installée dans Auth0 Dashboard. L’application Auth0 est l’endroit où vous allez configurer le fonctionnement de l’authentification pour votre projet.

Configurer une application Auth0.

Utilisez le sélecteur interactif pour créer une nouvelle application Auth0 ou sélectionner une application Auth0 Native existante. Dans Auth0, il est attribué à chaque application un identifiant client unique alphanumérique que votre code d’application utilisera pour appeler les API Auth0 via la trousse SDK.

Tous les paramètres que vous configurez à l’aide de ce guide rapide seront automatiquement mis à jour pour votre application dans le Dashboard, qui est l’endroit où vous pourrez gérer vos applications à l’avenir.

Si vous préférez explorer une configuration complète, consultez plutôt un exemple d’application.

Configurer les URL de rappel et les URL de déconnexion

Les Callback URL et les URL de déconnexion sont des URL qu’invoque Auth0 pour rediriger vers votre application. Auth0 invoque l’URL de rappel après avoir authentifié l’utilisateur, et l’URL de déconnexion après avoir supprimé le témoin de session. Si les Callback URL et les URL de déconnexion ne sont pas définies, les utilisateurs ne pourront pas se connecter ou se déconnecter de l’application et recevront un message d’erreur.

Définissez les Callback URL et les URL de déconnexion sur les valeurs suivantes, en fonction de votre plateforme.

Sur Android, la valeur du paramètre fictif SCHEME peut être https ou un autre schéma personnalisé. Les schémas https nécessitent l’activation des liens d’application Android.

Sur iOS 17.4+ et macOS 14.4+, il est possible d’utiliser des liens universels (https) comme URL Callback et de déconnexion. Lorsqu’activé, la trousse SDK reviendra à l’utilisation d’un schéma d’URL personnalisé sur les anciennes versions iOS/MacOS – l’identificateur de bundlede votre application. Cette fonctionnalité nécessite un Xcode 15.3+ et un compte Apple Developer payant.

Android

SCHEME://{yourDomain}/android/YOUR_PACKAGE_NAME/callback

iOS

https://{yourDomain}/ios/YOUR_BUNDLE_IDENTIFIER/callback, -## Installez la trousse SDK Flutter Auth0 +YOUR_BUNDLE_IDENTIFIER://{yourDomain}/ios/YOUR_BUNDLE_IDENTIFIER/callback

macOS

https://{yourDomain}/macos/YOUR_BUNDLE_IDENTIFIER/callback, +YOUR_BUNDLE_IDENTIFIER://{yourDomain}/macos/YOUR_BUNDLE_IDENTIFIER/callback

Par exemple, si l’identifiant de votre bundle iOS était com.example.MyApp et votre domaine Auth0 était example.us.auth0.com, alors cette valeur serait :

https://example.us.auth0.com/ios/com.example.MyApp/callback, -

Ajoutez la trousse SDK Flutter Auth0 au projet :

flutter pub add auth0_flutter

+com.example.MyApp://example.us.auth0.com/ios/com.example.MyApp/callback

+ +## Installer la trousse SDK Flutter Auth0 + + +

Ajoutez la trousse SDK Flutter Auth0 au projet :

flutter pub add auth0_flutter

## Configurer Android -

Si vous ne développez pas pour la plateforme Android, ignorez cette étape.

La trousse SDK nécessite des paramètres fictifs dans le manifeste. Auth0 utilise des paramètres fictifs en interne pour définir un intent-filter, qui capture la Callback URL pour l’authentification. Vous devez définir le domaine du locataire Auth0 et le schéma de la Callback URL.

L'exemple utilise les paramètres fictifs suivants :

  • auth0Domain : le domaine de votre locataire Auth0. En général, vous le trouverez dans Auth0 Dashboard sous vos Application Settings (Paramètres d’application) dans le champ Domain (Domaine) . Si vous utilisez un domaine personnalisé, indiquez dans ce champ votre domaine personnalisé.

  • auth0Scheme : le schéma à utiliser. Peut être un schéma personnalisé, ou https si vous souhaitez utiliser les liens d'application Android. Pour en savoir plus sur la définition de cette valeur, lisez le fichier SDK README d’Auth0.Android.

Vous n’avez pas besoin de déclarer un intent-filter spécifique pour votre activité car vous avez défini les paramètres fictifs dans le manifeste avec vos valeurs Auth0 Domain et Scheme. La bibliothèque gère la redirection pour vous.

Exécutez Sync Project with Gradle Files dans Android Studio pour appliquer vos modifications.

+

Si vous ne développez pas pour la plateforme Android, ignorez cette étape.

La trousse SDK nécessite des placeholder dans le manifeste. Auth0 utilise des placeholder en interne pour définir un intent-filter, qui capture l’URL de rappel d’authentification. Vous devez définir le domaine du locataire Auth0 et le schéma de l’URL de rappel.

L’exemple utilise les placeholder suivants :

  • auth0Domain : Le domaine de votre locataire Auth0. En général, vous le trouverez dans Auth0 Dashboard sous vos Application Settings (Paramètres d’application) dans le champ Domain (Domaine). Si vous utilisez un domaine personnalisé, indiquez dans ce champ votre domaine personnalisé.

  • auth0Scheme : Le schéma à utiliser. Peut être un schéma personnalisé, ou https si vous souhaitez utiliser les liens d’application Android. Vous pouvez en savoir plus sur la définition de cette valeur dans le SDK README d’Auth0.Android.

Vous n’avez pas besoin de déclarer un intent-filter spécifique pour votre activité car vous avez défini les paramètres fictifs dans le manifeste avec vos valeurs Auth0 Domain et Scheme. La bibliothèque gère la redirection pour vous.

Exécutez Sync Project with Gradle Files dans Android Studio pour appliquer vos modifications.

## Configurer iOS/macOS -

Si vous ne développez pas pour les plateformes iOS ou macOS, ignorez cette étape.

Cette étape nécessite un compte Apple Developer payant. Il est nécessaire d’utiliser des liens universels comme URL Callback et de déconnexion. Ignorez cette étape pour utiliser plutôt un schéma d’URL personnalisé.

Configurer l’ID Team et l’identificateur de bundle

Allez à la page des paramètres de votre application Auth0, faites défiler jusqu’en bas, et ouvrez Advanced Settings (Paramètres avancés) > Device Settings (Paramètres de l’appareil). Dans la section iOS, définissez Team ID sur votre Apple Team ID et App ID sur l’identificateur du bundle de votre application.

null

Cette action ajoutera votre application au fichier apple-app-site-association de votre locataire Auth0.

Ajoutez la capacité de domaine associé.

Ouvrez votre application dans Xcode en exécutant open ios/Runner.xcworkspace (ou open macos/Runner.xcworkspace pour macOS). Allez à l’onglet Signing and Capabilities (Signature et capacités) des paramètres de la cible du Runner, puis appuyez sur le bouton + Capability (Capabilité). Sélectionnez ensuite Associated Domains (Domaines associés).

null

Ensuite, ajoutez l'entrée suivante sous Associated Domains (Domaines associés) :

webcredentials:{yourDomain}

Si vous avez un domaine personnalisé, utilisez-le à la place du domaine Auth0 de la page des paramètres.

Pour que le domaine associé fonctionne, votre application doit être signée avec votre certificat d’équipe même lors du développement pour le simulateur iOS. Assurez-vous d’utiliser Apple Team dont la Team ID (ID d’équipe) est configurée dans la page des paramètres de votre application Auth0.

+

Si vous ne développez pas pour les plateformes iOS ou macOS, ignorez cette étape.

Cette étape nécessite un compte Apple Developer payant. Il est nécessaire d’utiliser des liens universels comme URL Callback et de déconnexion. Ignorez cette étape pour utiliser plutôt un schéma d’URL personnalisé.

Configurer Team ID et l’identifiant du bundle

Allez à la page des paramètres de votre application Auth0, faites défiler jusqu’en bas, et ouvrez Advanced Settings (Paramètres avancés) > Device Settings (Paramètres de l’appareil). Dans la section iOS, définissez Team ID sur votre Apple Team ID et App ID sur l’identificateur du bundle de votre application.

null

Cette action ajoutera votre application au fichier apple-app-site-association de votre locataire Auth0.

Ajouter la capacité de domaine associé

Ouvrez votre application dans Xcode en exécutant open ios/Runner.xcworkspace (ou open macos/Runner.xcworkspace pour macOS). Allez à l’ongletSigning and Capabilities (Signature et capacités) des paramètres de la cible de l’exécuteur, puis appuyez sur le bouton + Capability (Capabilité). Puis sélectionnez Associated Domains (Domaines associés).

null

Ensuite, ajoutez l’entrée suivante sous Associated Domains (Domaines associés) :

webcredentials:{yourDomain}

Si vous avez un domaine personnalisé, utilisez-le à la place du domaine Auth0 de la page des paramètres.

Pour que le domaine associé fonctionne, votre application doit être signée avec votre certificat d’équipe même lors du développement pour le simulateur iOS. Assurez-vous d’utiliser Apple Team dont la Team ID (ID d’équipe) est configurée dans la page des paramètres de votre application Auth0.

## Ajouter une fonctionnalité de connexion à votre application {{{ data-action="code" data-code="main_view.dart#29:40" }}} -

La connexion universelle est le moyen le plus simple de configurer l’authentification dans votre application. Nous recommandons de l’utiliser pour une meilleure expérience, une meilleure sécurité et un plus grand nombre de fonctionnalités.

Intégrez la connexion universelle Auth0 dans votre application Flutter en utilisant la classe Auth0. Redirigez vos utilisateurs vers la page de connexion universelle Auth0 en utilisant webAuthentication().login(). Il s'agit d'une fonctionnalité Future pour que vous récupériez les jetons de l’utilisateur.

Android : si vous utilisez un schéma personnalisé, passez ce schéma à la méthode de connexion afin que le SDK puisse assurer un aller-retour vers la page de connexion :

await auth0.webAuthentication(scheme: 'YOUR CUSTOM SCHEME').login();

Lorsqu’un utilisateur se connecte, il est redirigé vers votre application. Vous pouvez alors accéder à l’identificateur et aux jetons d’accès de cet utilisateur.

Flutter - Étape 5 - Ajouter une fonctionnalité de connexion à votre application

Ajoutez un bouton à votre application qui appelle webAuthentication().login() et connecte l’utilisateur à votre application. Vérifiez que vous êtes redirigé vers Auth0 pour l’authentification, puis vers votre application.

Vérifiez que vous pouvez accéder aux jetons sur le résultat de l’appel de login.

+

La connexion universelle est le moyen le plus simple de mettre en place l’authentification dans votre application. Nous recommandons de l’utiliser pour une meilleure expérience, une meilleure sécurité et un plus grand nombre de fonctionnalités.

Intégrez la connexion universelle Auth0 dans votre application Flutter en utilisant la classe Auth0. Redirigez vos utilisateurs vers la page de connexion universelle Auth0 en utilisant webAuthentication().login(). Il s’agit d’une fonctionnalité Future pour que vous récupériez les jetons de l’utilisateur.

Android : si vous utilisez un schéma personnalisé, passez ce schéma à la méthode de connexion afin que le SDK puisse assurer un aller-retour vers la page de connexion :

await auth0.webAuthentication(scheme: ’YOUR CUSTOM SCHEME’).login();

Lorsqu’un utilisateur se connecte, il est redirigé vers votre application. Puis, vous pouvez accéder à l’identifiant et aux jetons d’accès de cet utilisateur.

Flutter – Étape 5 – Ajouter une fonctionnalité de connexion à votre application

Ajoutez un bouton à votre application qui appelle webAuthentication().login() et déconnecte l’utilisateur de votre application. Vérifiez que vous êtes redirigé vers Auth0 pour l’authentification, puis renvoyé vers votre application.

Vérifiez que vous pouvez accéder aux jetons sur le résultat de l’appel login.

-

If your app did not launch successfully:

  • Ensure you set the Allowed Callback URLs are correct

  • Verify you saved your changes after entering your URLs

  • Make sure the domain and client ID values are imported correctly

  • If using Android, ensure that the manifest placeholders have been set up correctly, otherwise the redirect back to your app may not work

Still having issues? Check out our documentation or visit our community page to get more help.

+

Si le lancement de votre application a échoué :

  • Assurez-vous que les URL de rappel autorisées sont correctement définies

  • Vérifiez que vous avez enregistré vos modifications après avoir saisi vos URL

  • Assurez-vous que les valeurs de domaine et d’identifiant client sont importées correctement

  • Si vous utilisez Android, assurez-vous que les paramètres fictifs du manifeste ont été correctement configurés, sinon la redirection vers votre application risque de ne pas fonctionner

Vous rencontrez toujours des problèmes? Consultez notre documentation ou la page de notre communauté pour obtenir de l’aide.

## Ajouter une fonctionnalité de déconnexion à votre application {{{ data-action="code" data-code="main_view.dart#45:55" }}} -

Pour déconnecter les utilisateurs, redirigez-les vers le point de terminaison Auth0 pour effacer leur session de connexion en appelant la trousse SDK Flutter Auth0 webAuthentication().logout(). En savoir plus sur la déconnexion d’Auth0.

Android : si vous utilisez un schéma personnalisé, passez ce schéma à la méthode de déconnexion afin que la trousse SDK puisse renvoyer correctement vers votre application :

await auth0.webAuthentication(scheme: 'YOUR CUSTOM SCHEME').logout();

Flutter - Étape 5 - Ajouter une fonctionnalité de connexion à votre application

Ajoutez un bouton à votre application qui appelle webAuthentication().logout() et déconnecte l’utilisateur de votre application. Lorsque vous le sélectionnez, vérifiez que votre application Flutter vous redirige vers le point de terminaison de déconnexion et vice versa. Vous ne devriez pas être connecté à votre application.

+

Pour déconnecter les utilisateurs, redirigez-les vers le point de terminaison Auth0 pour effacer leur session de connexion en appelant la trousse SDK Flutter Auth0 webAuthentication().logout(). En savoir plus sur la déconnexion d’Auth0.

Android : si vous utilisez un schéma personnalisé, passez ce schéma à la méthode de déconnexion afin que la trousse SDK puisse renvoyer correctement vers votre application :

await auth0.webAuthentication(scheme: ’YOUR CUSTOM SCHEME’).logout();

Flutter - Étape 6 - Ajouter une fonctionnalité de connexion à votre application

Ajoutez un bouton à votre application qui appelle webAuthentication().logout() et déconnecte l’utilisateur de votre application. Lorsque vous le sélectionnez, vérifiez que votre application Flutter vous redirige vers le point de terminaison de déconnexion et vice-versa. Vous ne devriez pas être connecté à votre application.

-

If your app did not log out successfully:

  • Ensure the Allowed Logout URLs are set properly

  • Verify you saved your changes after entering your URLs

Still having issues? Check out our documentation or visit our community page to get more help.

+

Si votre application ne s’est pas déconnectée avec succès :

  • Assurez-vous que les URL de déconnexion autorisées sont correctement définies

  • Vérifiez que vous avez enregistré vos modifications après avoir saisi vos URL

Vous rencontrez toujours des problèmes? Consultez notre documentation ou la page de notre communauté pour obtenir de l’aide.

## Afficher les informations du profil utilisateur {{{ data-action="code" data-code="profile_view.dart" }}} -

Le profil utilisateur récupère automatiquement les propriétés du profil utilisateur pour vous lorsque vous appelez webAuthentication().login(). L’objet retourné à partir de l’étape de connexion contient une propriété user avec toutes les propriétés du profil utilisateur, qui est renseigné en décodant le jeton d’identification.

Flutter - Étape 7 - Afficher les informations du profil utilisateur

Connectez-vous et inspectez la propriété user du résultat. Vérifiez les informations de profil utilisateur actuelles, telles que son email ou name.

+

Le profil utilisateur récupère automatiquement les propriétés du profil utilisateur pour vous lorsque vous appelez webAuthentication().login(). L’objet retourné à partir de l’étape de connexion contient une propriété user avec toutes les propriétés du profil utilisateur, qui est renseigné en décodant le jeton d’ID.

Flutter - Étape 7 - Afficher les informations du profil utilisateur

Connectez-vous et inspectez la propriété user par rapport au résultat. Vérifiez les informations de profil utilisateur actuel, telles que son email ou name.

-

If your app did not return user profile information:

  • Verify the access token is valid

Still having issues? Check out our documentation or visit our community page to get more help.

+

Si votre application n’a pas renvoyé d’informations sur le profil utilisateur :

  • Vérifiez la validité du jeton d’accès

Vous rencontrez toujours des problèmes? Consultez notre documentation ou la page de notre communauté pour obtenir de l’aide.

diff --git a/fr-ca/articles/quickstart/native/ionic-angular/interactive.md b/fr-ca/articles/quickstart/native/ionic-angular/interactive.md index 7ab60b6db2..46d19d59ee 100644 --- a/fr-ca/articles/quickstart/native/ionic-angular/interactive.md +++ b/fr-ca/articles/quickstart/native/ionic-angular/interactive.md @@ -1,6 +1,6 @@ --- title: Ajouter la connexion à votre application Ionic Angular avec Capacitor -description: Ce guide montre comment intégrer Auth0 avec une application Ionic (Angular) & Capacitor en utilisant la trousse SDK Angular Auth0. +description: Ce guide explique comment intégrer Auth0 avec une application Ionic (Angular) et Capacitor en utilisant la trousse SDK Angular Auth0. interactive: true files: - files/app.module @@ -9,81 +9,81 @@ files: - files/logout-button - files/user-profile github: - path: https://github.com/auth0-samples/auth0-ionic-samples/tree/main/angular + path: angular locale: fr-CA --- # Ajouter la connexion à votre application Ionic Angular avec Capacitor -

Auth0 vous permet d’ajouter rapidement l’authentification et d'accéder aux informations relatives au profil de l’utilisateur dans votre application. Ce guide montre comment intégrer Auth0 avec une application Ionic (Angular) & Capacitor en utilisant la trousse SDK Angular Auth0.

+

Auth0 vous permet d’ajouter rapidement l’authentification et d’accéder aux informations relatives au profil de l’utilisateur dans votre application. Ce guide explique comment intégrer Auth0 avec une application Ionic (Angular) & Capacitor en utilisant la trousse SDK Angular Auth0.

## Démarrage -

Ce démarrage rapide suppose que vous avez déjà une application Ionic en cours d’exécution avec Capacitor. Si ce n’est pas le cas, consultez le Using Capacitor with Ionic Framework guide (Utiliser Capacitor avec Ionic Framework) pour commencer avec une application simple ou clonez nos exemples d’applications.

Vous devez également connaître le Capacitor development workflow (flux de travail de développement Capacitor).

+

Ce guide de démarrage rapide suppose que vous avez déjà une application Ionic en cours d’exécution avec Capacitor. Si ce n’est pas le cas, consultez Using Capacitor with Ionic Framework guide (Utiliser Capacitor avec le cadre d’applications Ionic) pour commencer avec une application simple ou clonez nos our sample apps (exemples d’applications).

Vous devez également être familiarisé avec Capacitor development workflow (le flux de production de développement Capacitor).

-## Configuration d'Auth0 +## Configuration d’Auth0 -

Pour utiliser les services Auth0, vous devez avoir une application installée dans Auth0 Dashboard. Vous allez configurer le fonctionnement de l’authentification pour votre projet dans l'application Auth0.

Tout au long de cet article, YOUR_PACKAGE_ID est l’identifiant du package de votre application. Ceci peut être trouvé et configuré dans le champ appId de votre fichier capacitor.config.ts . Voir Capacitor's Config schema (Schéma de configuration du Capacitor) pour plus d'informations.

Configurer une application

Utilisez le sélecteur interactif pour créer une nouvelle application Auth0 ou sélectionner une application existante qui représente le projet avec lequel vous souhaitez vous intégrer. Dans Auth0, il est attribué à chaque application un identifiant client unique alphanumérique que votre code d’application utilisera pour appeler les API Auth0 via le SDK.

Tous les paramètres que vous configurez à l’aide de ce guide rapide seront automatiquement mis à jour pour votre application dans le Dashboard, qui est l’endroit où vous pourrez gérer vos applications à l’avenir.

Si vous préférez explorer une configuration complète, vous pouvez plutôt consulter une application faisant office d’exemple.

Configuration des URL de rappel

Une URL de rappel est une URL intégrée dans votre application vers laquelle vous souhaitez qu’Auth0 redirige les utilisateurs après qu’ils se sont authentifiés. Si elle n’est pas définie, les utilisateurs ne seront pas redirigés vers votre application après s’être connectés.

Si vous suivez notre projet à titre d’exemple, définissez ceci sur :

YOUR_PACKAGE_ID://{yourDomain}/capacitor/YOUR_PACKAGE_ID/callback

Configurer les URL de déconnexion

Une URL de déconnexion est une URL intégrée dans votre application vers laquelle vous souhaitez qu’Auth0 redirige les utilisateurs après qu’ils se sont déconnectés. Si elle n’est pas définie, les utilisateurs ne pourront pas se déconnecter de votre application et recevront un message d’erreur.

Si vous suivez notre projet à titre d’exemple, définissez ceci sur :

YOUR_PACKAGE_ID://{yourDomain}/capacitor/YOUR_PACKAGE_ID/callback

Configurer origines autorisées

Pour pouvoir faire des requêtes à partir de votre application native vers Auth0, définissez les origines autorisées suivantes dans vos paramètres de l’application.

Si vous suivez notre projet à titre d’exemple, définissez ceci sur capacitor://localhost, http://localhost pour iOS et Android respectivement.

Enfin, assurez-vous que le type d’application pour votre application est défini sur Native dans les paramètres de l’application.

+

Pour utiliser les services Auth0, vous devez avoir une application installée dans Auth0 Dashboard. L’application Auth0 est l’endroit où vous allez configurer le fonctionnement de l’authentification pour votre projet.

Tout au long de cet article, YOUR_PACKAGE_ID est l’identifiant du package de votre application. Ceci peut être trouvé et configuré dans le champ appId de votre fichier capacitor.config.ts . Voir Capacitor’s Config schema (Schéma de configuration du Capacitor) pour plus d’informations.

Configurer une application

Utilisez le sélecteur interactif pour créer une nouvelle application Auth0 ou sélectionner une application existante qui représente le projet avec lequel vous souhaitez effectuer l’intégration. Dans Auth0, il est attribué à chaque application un identifiant client unique alphanumérique que votre code d’application utilisera pour appeler les API Auth0 via la trousse SDK.

Tous les paramètres que vous configurez à l’aide de ce guide rapide seront automatiquement mis à jour pour votre application dans le Dashboard, qui est l’endroit où vous pourrez gérer vos applications à l’avenir.

Si vous préférez explorer une configuration complète, consultez plutôt un exemple d’application.

Configurer les URL de rappel

Une URL de rappel est une URL intégrée dans votre application vers laquelle vous souhaitez qu’Auth0 redirige les utilisateurs après leur authentification. Si elle n’est pas définie, les utilisateurs ne seront pas redirigés vers votre application après s’être connectés.

Si vous suivez notre projet à titre d’exemple, définissez ceci sur :

YOUR_PACKAGE_ID://{yourDomain}/capacitor/YOUR_PACKAGE_ID/callback

Configuration des URL de déconnexion

Une URL de déconnexion est une URL intégrée dans votre application vers laquelle vous souhaitez qu’Auth0 redirige les utilisateurs après leur déconnexion. Si elle n’est pas définie, les utilisateurs ne pourront pas se déconnecter de votre application et recevront un message d’erreur.

Si vous suivez notre projet à titre d’exemple, définissez ceci sur :

YOUR_PACKAGE_ID://{yourDomain}/capacitor/YOUR_PACKAGE_ID/callback

Configurer les origines autorisées

Pour pouvoir faire des requêtes à partir de votre application d’origine vers Auth0, définissez les origines autorisées dans vos Application Settings (Paramètres d’application).

Si vous suivez notre projet à titre d’exemple, définissez ceci sur capacitor://localhost, http://localhost pour iOS et Android respectivement.

Enfin, assurez-vous que le type d’application pour votre application est défini sur Native dans les Application Settings (Paramètres d’application).

## Installer la trousse SDK React Auth0 -

Exécutez la commande suivante dans le répertoire de votre projet pour installer la trousse SDK Angular Auth0 :

npm install @auth0/auth0-angular

La trousse SDK expose plusieurs types qui vous aident à intégrer Auth0 avec votre application Angular, y compris un module et un service d’authentification.

Installer les plugiciels Capacitor

Ce démarrage rapide et cet exemple utilisent certains des plugiciels officiels Capacitor. Installez-les dans votre application à l’aide de la commande suivante :

npm install @capacitor/browser @capacitor/app

  • @capacitor/browser : Vous permet d’interagir avec le navigateur de système de l'appareil et est utilisé pour ouvrir l’URL vers le terminal d’autorisation de Auth0.

  • @capacitor/app : Vous permet de souscrire à des événements d’application de haut niveau, utiles pour la gestion des rappels depuis Auth0.

Le plugiciel de navigateur de Capacitor sur iOS utilise SFSafariViewController, qui sur iOS 11+ ne partage pas les témoins avec Safari sur l’appareil. Cela signifie que SSO ne fonctionnera pas sur ces appareils. Si vous avez besoin de SSO, veuillez utiliser un plugiciel compatible qui utilise ASWebAuthenticationSession.

+

Exécutez la commande suivante dans le répertoire de votre projet pour installer la trousse SDK Angular Auth0 :

npm install @auth0/auth0-angular

La trousse SDK expose plusieurs types qui vous aident à intégrer Auth0 avec votre application Angular, y compris un module et un service d’authentification.

Installer les plugiciels Capacitor

Ce guide rapide et cet exemple utilisent certains des plugiciels officiels Capacitor. Installez-les dans votre application à l’aide de la commande suivante :

npm install @capacitor/browser @capacitor/app

  • @capacitor/browser : Vous permet d’interagir avec le navigateur de système de l’appareil, et est utilisé pour ouvrir l’URL vers le point de terminaison d’autorisation d’Auth0.

  • @capacitor/app : Vous permet de vous abonner à des événements d’application de haut niveau, utiles pour la gestion des Callbacks depuis Auth0.

Le plugiciel de navigateur de Capacitor sur iOS utilise SFSafariViewController, qui sur iOS 11+ ne partage pas les témoins avec Safari sur l’appareil. Cela signifie que SSO ne fonctionnera pas sur ces appareils. Si vous avez besoin de SSO, veuillez utiliser un plugiciel compatible qui utilise ASWebAuthenticationSession.

## Enregistrer et configurer le module d’authentification {{{ data-action="code" data-code="app.module.ts" }}} -

La trousse SDK exporte AuthModule, un module qui contient tous les services nécessaires au fonctionnement de la trousse SDK. Ce module doit être enregistré avec votre application et être configuré avec votre domaine Auth0 et votre identifiant client.

La fonction AuthModule.forRoot prend la configuration suivante :

  • domain : La valeur du domaine présente dans les Paramètres de l’application que vous avez créée dans le Auth0 Dashboard, ou votre domaine personnalisé si vous utilisez la fonctionnalité de domaines personnalisésd’Auth0.

  • clientId : La valeur de l’identifiant client présente dans les Paramètres de l’application que vous avez créée dans le Auth0 Dashboard.

  • useRefreshTokens : Pour utiliser auth0-angular avec Ionic sur Android et iOS, il est nécessaire d’activer les jetons d'actualisation.

  • useRefreshTokensFallback : Pour utiliser auth0-angular avec Ionic sur Android et iOS, il est nécessaire de désactiver le iframe de substitution.

  • authorizationParams.redirect_uri : L’URL pour rediriger vos utilisateurs après qu’ils se sont authentifiés avec Auth0.

Pour conserver l’authentification après la fermeture et la réouverture de l’application, vous pouvez définir cacheLocation sur localstorage lors de la configuration du SDK, mais soyez conscient des risques liés au stockage de jetons dans localstorage. De plus, localstorage devrait être traité comme transitoire dans l’application Capacitor car les données pourraient être récupérées de façon inattendue dans certaines circonstances. Veuillez lire les directives sur le stockage dans la documentation Capacitor.

En outre, le SDK a la capacité d’utiliser une implémentation de cache personnalisée pour stocker des jetons, si vous avez une exigence d’utiliser un mécanisme de stockage plus sûr et persistant.

Notez que nous recommandons de ne pas utiliser le plugiciel Capacitor pour stocker les jetons, car cela est soutenu par UserDefaults et SharedPreferences sur iOS et Android respectivement. Les données stockées à l’aide de ces API ne sont pas cryptées, non sécurisées et peuvent également être synchronisées dans le nuage.

Ionic & Capacitor (Angular) - Étape 4 - Enregistrer et configurer le module d’authentification

Maintenant que vous avez configuré votre application avec la trousse SDK Angular Auth0, exécutez votre application pour vérifier que la trousse SDK est initialisée sans erreur et que votre application s’exécute comme auparavant.

+

La trousse SDK exporte AuthModule, un module qui contient tous les services nécessaires au fonctionnement de la trousse SDK. Ce module doit être enregistré avec votre application et être configuré avec votre domaine Auth0 et votre identifiant client.

La fonction AuthModule.forRoot prend la configuration suivante :

  • domain : La valeur domain présente dans les paramètres de l’application que vous avez créée dans Auth0 Dashboard, ou votre domaine personnalisé si vous utilisez la fonctionnalité Domaines personnalisés d’Auth0.

  • clientId : La valeur de l’identifiant du client présente dans les paramètres de l’application que vous avez créée dans Auth0 Dashboard.

  • useRefreshTokens : Pour utiliser auth0-angular avec Ionic sur Android et iOS, il est nécessaire d’activer les jetons d’actualisation.

  • useRefreshTokensFallback : Pour utiliser auth0-angular avec Ionic sur Android et iOS, il est nécessaire de désactiver le iframe de substitution.

  • authorizationParams.redirect_uri : L’URL pour rediriger vos utilisateurs après qu’ils se sont authentifiés avec Auth0.

Pour conserver l’authentification après la fermeture et la réouverture de l’application, vous pouvez définir cacheLocation sur localstorage lors de la configuration du SDK, mais soyez conscient des risques liés au stockage de jetons dans localstorage. De plus, localstorage devrait être traité comme transitoire dans l’application Capacitor car les données pourraient être récupérées de façon inattendue dans certaines circonstances. Veuillez lire les directives sur le stockage dans la documentation Capacitor.

En outre, le SDK a la capacité d’utiliser une implémentation de cache personnalisée pour stocker des jetons, si vous avez une exigence d’utiliser un mécanisme de stockage plus sûr et persistant.

Notez que nous recommandons de ne pas utiliser le plugiciel Capacitor pour stocker les jetons, car cela est soutenu par UserDefaults et SharedPreferences sur iOS et Android respectivement. Les données stockées à l’aide de ces API ne sont pas cryptées, non sécurisées et peuvent également être synchronisées dans le nuage.

Ionic & Capacitor (Angular) - Étape 4 - Enregistrer et configurer le module d’authentification

Maintenant que vous avez configuré votre application avec la trousse SDK Angular Auth0, exécutez votre application pour vérifier que la trousse SDK est initialisée sans erreur et que votre application s’exécute comme auparavant.

-

Sorry about that. Here's a couple things to double check:

  • ensure the correct application is selected

  • did you save after entering your URLs?

  • make sure the domain and Client ID imported correctly

Still having issues? Check out our documentation or visit our community page to get more help.

+

Nous vous prions de nous excuser pour tout inconvénient causé. Voici quelques éléments à vérifier :

  • assurez-vous que la bonne application est sélectionnée

  • avez-vous procédé à un enregistrement après avoir saisi vos URL?

  • assurez-vous que le domaine et l’identifiant client ont été importés correctement

Vous rencontrez toujours des problèmes? Consultez notre documentation ou visitez la page de notre communauté pour obtenir de l’aide.

## Ajouter une fonctionnalité de connexion à votre application {{{ data-action="code" data-code="login-button.ts" }}} -

Dans une application Capacitor, le plugiciel de navigateur Capacitor effectue une redirection vers la page de connexion universelle Auth0. Définissez le paramètre openUrl sur la fonction loginWithRedirect pour utiliser Browser.open de sorte que l’URL soit ouverte à l’aide du composant navigateur du système de l’appareil (SFSafariViewController sur iOS et Chrome Custom Tabs sur Android).

Par défaut, la méthode loginWithRedirect de la trousse SDK utilise window.location.href pour accéder à la page de connexion dans l’application de navigateur par défaut sur l'appareil de l’utilisateur plutôt que dans le composant de navigateur système approprié pour la plate-forme. L’utilisateur quitterait votre application pour s’authentifier et pourrait rendre l’expérience utilisateur sous-optimale.

Ionic & Capacitor (Angular) - Étape 5 - Ajouter la connexion à votre application

La fonction loginWithRedirect indique à la trousse SDK d’initier le flux de connexion, en utilisant la fonction Browser.open pour ouvrir l’URL de connexion avec le composant navigateur du système de la plate-forme en définissant le paramètre openUrl . Cela permet à votre utilisateur de se connecter à votre application. Les utilisateurs sont redirigés vers la page de connexion à Auth0 et ne reçoivent aucune erreur.

+

Dans une application Capacitor, le plugiciel de navigateur Capacitor effectue une redirection vers la page de connexion universelle Auth0. Définissez le paramètre openUrl sur la fonction loginWithRedirect pour utiliser Browser.open de sorte que l’URL soit ouverte à l’aide du composant navigateur du système de l’appareil (SFSafariViewController sur iOS et les Onglets Personnalisés Chrome sur Android).

Par défaut, la méthode loginWithRedirect de la trousse SDK utilise window.location.href pour accéder à la page de connexion dans l’application de navigateur par défaut sur l’appareil de l’utilisateur plutôt que dans le composant de navigateur système approprié pour la plate-forme. L’utilisateur quitterait votre application pour s’authentifier et pourrait rendre l’expérience utilisateur sous-optimale.

Ionic & Capacitor (Angular) - Étape 5 - Ajouter la connexion à votre application

La fonction loginWithRedirect indique à la trousse SDK d’initier le flux de connexion, en utilisant la fonction Browser.open pour ouvrir l’URL de connexion avec le composant navigateur du système de la plateforme en définissant le paramètre openUrl. Cela permet à votre utilisateur de se connecter à votre application. Les utilisateurs sont redirigés vers la page de connexion à Auth0 et ne reçoivent aucune erreur.

-

Sorry about that. Here's a couple things to double check:

  • ensure that there are no errors in the browser's console window at the point of login

  • ensure the domain and Client ID are correct according to your Auth0 application in the Dashboard

  • if you are redirected to Auth0 and receive an error page, check the "technical details" section at the bottom for the reason for the failure

+

Nous vous prions de nous excuser pour tout inconvénient causé. Voici quelques éléments à vérifier :

  • assurez-vous qu’il n’y a pas d’erreurs dans la fenêtre de la console du navigateur au point de connexion

  • assurez-vous que le domaine et l’identifiant client sont corrects selon votre application Auth0 dans le tableau de bord

  • si vous êtes redirigé vers Auth0 et recevez une page d’erreur, vérifiez la section des « détails techniques » en bas de la page pour connaître la raison de l’échec

-## Gérer le rappel de connexion {{{ data-action="code" data-code="app.component.ts" }}} +## Gérer la callback de connexion {{{ data-action="code" data-code="app.component.ts" }}} -

Une fois que les utilisateurs se connectent avec la page de connexion universelle, ils se redirigent vers votre application via une URL avec un schéma d’URL personnalisé. L’événement appUrlOpen doit être géré dans votre application. Vous pouvez appeler la méthode handleRedirectCallback à partir de la trousse SDK Auth0 pour initialiser l’état d’authentification.

Vous pouvez utiliser cette méthode uniquement sur une redirection depuis Auth0. Pour vérifier le succès, vérifiez la présence des paramètres code et state dans l’URL.

La méthode Browser.close() devrait fermer le navigateur lorsque cet événement est déclenché.

Notez que le rappel de l’événement appUrlOpen est enveloppé dans ngZone.run. Les changements aux observables qui se produisent lorsque handleRedirectCallback est exécuté sont pris en compte par l’application Angular. Pour en savoir plus, lisez Using Angular with Capacitor (Utilisation d’Angular avec Capacitor). Sinon, l’écran ne se met pas à jour pour afficher l’état authentifié après la connexion.

Cet article suppose que vous utiliserez des schémas d’URL personnalisés pour gérer le rappel dans votre application. Pour ce faire, enregistrez votre YOUR_PACKAGE_ID comme schéma d’URL pour la plateforme de votre choix. Pour en savoir plus, lire Defining a Custom URL Scheme (Définition d’un schéma d’URL personnalisé) pour iOS ou Create Deep Links to App Content (Création de liens profonds vers le contenu des applications) pour Android.

Ionic & Capacitor (Angular) - Étape 6 - Gérer le rappel de connexion

Ajoutez l’appUrlOpen au composant App de votre application et connectez-vous. La fenêtre du navigateur devrait se fermer une fois que l’utilisateur s’authentifie et se connecte à votre application.

+

Une fois que les utilisateurs sont connectés avec la page de connexion universelle, ils sont redirigés vers votre application via une URL avec un schéma d’URL personnalisé. L’événement appUrlOpen doit être géré depuis votre application. Vous pouvez appeler la méthode handleRedirectCallback depuis la trousse SDK Auth0 pour initier l’état de l’authentification.

Vous pouvez utiliser cette méthode uniquement sur une redirection depuis Auth0. Pour vérifier le succès, vérifiez la présence du code et des paramètres state dans l’URL.

La méthode Browser.close() devrait fermer le navigateur lorsque cet événement est déclenché.

Notez que la callback de l’événement appUrlOpen est enveloppé dans ngZone.run. Les modifications aux observables survenant lorsque handleRedirectCallback est exécuté sont détectées par l’application Angular. Pour en savoir plus sur cette fonctionnalité, veuillez consulter Utiliser Angular avec Capacitator. Sinon, l’écran ne se met pas à jour pour afficher l’état authentifié après la connexion.

Cet article suppose que vous utiliserez des schémas d’URL personnalisés pour gérer le rappel dans votre application. Pour ce faire, enregistrez votre YOUR_PACKAGE_ID comme schéma d’URL pour la plateforme de votre choix. Pour en savoir plus, lire Defining a Custom URL Scheme (Définition d’un schéma d’URL personnalisé) pour iOS ou Create Deep Links to App Content (Création de liens profonds vers le contenu des applications) pour Android.

Ionic & Capacitor (Angular) - Étape 6 - Gérer le rappel de connexion

Ajoutez appUrlOpen au composant App de votre application et connectez-vous. La fenêtre du navigateur devrait se fermer une fois que l’utilisateur s’authentifie et se connecte à votre application.

-

Sorry about that. Here's a couple things to double check:

+

Nous vous prions de nous excuser pour tout inconvénient causé. Voici quelques éléments à vérifier :

## Ajouter une fonctionnalité de déconnexion à votre application {{{ data-action="code" data-code="logout-button.ts" }}} -

Maintenant que les utilisateurs peuvent se connecter, vous devez configurer une façon de se déconnecter. Les utilisateurs doivent se rediriger vers le terminal de connexion Auth0 dans le navigateur pour effacer leur session de navigation. Encore une fois, le plugiciel du navigateur de Capacitor devrait effectuer cette redirection afin que l’utilisateur ne quitte pas votre application et ne vive pas une expérience sous-optimale.

Pour y parvenir avec Ionic et Capacitor en conjonction avec la trousse SDK Auth0 :

  • Construire l’URL vers laquelle votre application Auth0 devrait rediriger après la déconnexion. Il s’agit d’une URL qui utilise votre schéma personnalisé enregistré et le domaine Auth0. Ajoutez-la à votre configuration de Allowed Logout URLs (URL de déconnexions permises) dans le Auth0 Dashboard

  • Déconnectez-vous de la trousse SDK en appelant logout et passez votre URL de redirection comme paramètre logoutParams.returnTo .

  • Définir le paramètre openUrl sur un rappel qui utilise le plugiciel de navigateur Capacitor pour ouvrir l’URL à l’aide de Browser.open.

De la même manière que pour l’étape de connexion, si vous ne définissez pas openUrl lors de l'appel de logout, le SDK redirige l’utilisateur vers l’URL de déconnexion à l’aide de l’application de navigateur par défaut sur l’appareil, ce qui offre une expérience utilisateur sous-optimale.

Ionic & Capacitor (Angular) - Étape 7 - Ajouter la déconnexion à votre application

Fournissez un moyen pour vos utilisateurs de se déconnecter de votre application. Vérifiez la redirection vers Auth0, puis vers l’adresse que vous avez spécifiée dans le paramètre returnTo . Assurez-vous que les utilisateurs ne sont plus connectés à votre application.

+

Maintenant que les utilisateurs peuvent se connecter, vous devez configurer une façon de se déconnecter. Les utilisateurs doivent être redirigés vers le point de terminaison de déconnexion Auth0 dans le navigateur pour effacer leur session de navigation. Encore une fois, le plugiciel du navigateur de Capacitor doit effectuer cette redirection afin que l’utilisateur ne quitte pas votre application et ne vive pas une expérience frustrante.

Pour y parvenir avec Ionic et Capacitor en conjonction avec le SDK Auth0 :

  • Créez l’URL de votre application vers laquelle Auth0 doit rediriger après la déconnexion. Il s’agit d’une URL qui utilise votre schéma personnalisé enregistré et le domaine Auth0. Ajoutez-la à votre configuration URL de déconnexions autorisées dans Auth0 Dashboard

  • Déconnectez-vous de la trousse SDK en appelant logout et transmettez votre URL de redirection comme paramètre logoutParams.returnTo.

  • Définissez le paramètre openUrl sur un callback qui utilise le plugiciel de navigateur Capacitor pour ouvrir l’URL à l’aide de Browser.open.

De la même manière que pour l’étape de connexion, si vous ne définissez pas openUrl lors de l’appel de logout, le SDK redirige l’utilisateur vers l’URL de déconnexion à l’aide de l’application de navigateur par défaut sur l’appareil, ce qui offre une expérience utilisateur sous-optimale.

Ionic & Capacitor (Angular) - Étape 7 - Ajouter la déconnexion à votre application

Fournir un moyen pour vos utilisateurs de se déconnecter de votre application. Vérifiez la redirection vers Auth0, puis vers l’adresse que vous avez spécifiée dans le paramètre returnTo. Assurez-vous que les utilisateurs ne sont plus connectés à votre application.

-

Sorry about that. Here's a couple things to double check:

  • check that the URL you provided to in the returnTo parameter is registered as an allowed callback URL in your Auth0 Dashboard

+

Nous vous prions de nous excuser pour tout inconvénient causé. Voici quelques éléments à vérifier :

  • vérifiez que l’URL que vous avez fournie dans le paramètre returnTo est enregistrée comme URL de rappel autorisée dans votre Tableau de bord Auth0

## Afficher le profil utilisateur {{{ data-action="code" data-code="user-profile.ts" }}} -

La trousse SDK Auth0 récupère les informations de profil associées aux utilisateurs connectés dans n’importe quel composant dont vous avez besoin, comme leur nom ou leur image de profil, pour personnaliser l’interface utilisateur. Les informations de profil sont disponibles via la propriété user$ exposée par AuthService.

Ionic & Capacitor (Angular) - Étape 8 - Afficher le profil utilisateur

Fournir un moyen pour que vos utilisateurs puissent voir leurs détails de profil utilisateur dans l’application et vérifier que vous êtes en mesure de récupérer et de voir les informations de votre profil à l’écran une fois que vous avez ouvert une session.

+

La trousse SDK Auth0 récupère les informations de profil associées aux utilisateurs connectés dans n’importe quel composant dont vous avez besoin, comme leur nom ou leur image de profil, pour personnaliser l’interface utilisateur. Les informations de profil sont disponibles via la propriété user$ exposée par AuthService.

Ionic & Capacitor (Angular) - Étape 8 - Afficher le profil utilisateur

Fournir un moyen pour que vos utilisateurs puissent voir leurs détails de profil utilisateur dans l’application et vérifiez que vous êtes en mesure de récupérer et d’afficher les informations de votre profil à l’écran une fois que vous avez ouvert une session.

-

Sorry about that. Here's a couple things to double check:

  • check that you are only reading the user's profile when isLoading is false

  • check that user resolves to an object and is not undefined

+

Nous vous prions de nous excuser pour tout inconvénient causé. Voici quelques éléments à vérifier :

  • assurez-vous de lire uniquement le profil utilisateur lorsque isLoading est false

  • assurez-vous que user résout un objet et n’est pas undefined

diff --git a/fr-ca/articles/quickstart/native/ionic-react/interactive.md b/fr-ca/articles/quickstart/native/ionic-react/interactive.md index 00c135a062..721bfb3921 100644 --- a/fr-ca/articles/quickstart/native/ionic-react/interactive.md +++ b/fr-ca/articles/quickstart/native/ionic-react/interactive.md @@ -1,6 +1,6 @@ --- -title: Ajouter la connexion à votre application Ionic React avec l'application Capacitor -description: Ce guide montre comment intégrer Auth0 avec une application Ionic (React) & Capacitor en utilisant la trousse SDK React Auth0. +title: Ajouter la connexion à votre application Ionic React avec l’application Capacitor +description: Ce guide explique comment intégrer Auth0 avec une application Ionic (React) & Capacitor en utilisant la trousse SDK React Auth0. interactive: true files: - files/index @@ -9,67 +9,67 @@ files: - files/app - files/user-profile github: - path: https://github.com/auth0-samples/auth0-ionic-samples/tree/main/react + path: react locale: fr-CA --- -# Ajouter la connexion à votre application Ionic React avec l'application Capacitor +# Ajouter la connexion à votre application Ionic React avec l’application Capacitor -

Auth0 vous permet d’ajouter rapidement l’authentification et de pouvoir accéder aux informations relatives au profil de l’utilisateur dans votre application. Ce guide montre comment intégrer Auth0 avec une application Ionic (React) & Capacitor en utilisant la trousse SDK React Auth0.

+

Auth0 vous permet d’ajouter rapidement l’authentification et de pouvoir accéder aux informations relatives au profil utilisateur dans votre application. Ce guide explique comment intégrer Auth0 avec une application Ionic (React) & Capacitor en utilisant la trousse SDK Auth0 React.

## Démarrage -

Ce démarrage rapide suppose que vous avez déjà une application Ionic en cours d’exécution avec Capacitor. Si ce n’est pas le cas, consultez le Using Capacitor with Ionic Framework guide (Utilisez Capacitor avec Ionic Framework) pour commencer avec une application simple ou clonez nos exemples d’applications.

Vous devez également connaître le flux de travail de développement Capacitor.

+

Ce guide de démarrage rapide suppose que vous avez déjà une application Ionic en cours d’exécution avec Capacitor. Si ce n’est pas le cas, consultez Using Capacitor with Ionic Framework guide (Utiliser Capacitor avec le cadre d’applications Ionic) pour commencer avec une application simple ou clonez nos our sample apps (exemples d’applications).

Vous devez également être familiarisé avec Capacitor development workflow (le flux de production de développement Capacitor).

-## Configuration d'Auth0 +## Configuration d’Auth0 -

Pour utiliser les services Auth0, vous devez avoir une application installée dans Auth0 Dashboard. L’application Auth0 est l’endroit où vous allez configurer le fonctionnement de l’authentification pour votre projet.

Tout au long de cet article, YOUR_PACKAGE_ID est l’identifiant du package de votre application. Ceci peut être trouvé et configuré dans le champ appId de votre fichier capacitor.config.ts . Voir Capacitor's Config schema (Schéma de configuration du Capacitor) pour plus d'informations.

Configurer une application

Utilisez le sélecteur interactif pour créer une nouvelle application Auth0 ou sélectionner une application existante qui représente le projet avec lequel vous souhaitez vous intégrer. Dans Auth0, un identifiant client unique alphanumérique est attribué à chaque application que votre code d’application utilisera pour appeler les API Auth0 via la trousse SDK.

Tous les paramètres que vous configurez à l’aide de ce guide rapide seront automatiquement mis à jour pour votre application dans le Dashboard, qui est l’endroit où vous pourrez gérer vos applications à l’avenir.

Si vous préférez explorer une configuration complète, vous pouvez plutôt consulter une application faisant office d’exemple.

Configuration des URL de rappel

Une URL de rappel est une URL intégrée dans votre application vers laquelle vous souhaitez qu’Auth0 redirige les utilisateurs après qu’ils se sont authentifiés. Si elle n’est pas définie, les utilisateurs ne seront pas redirigés vers votre application après s’être connectés.

Si vous suivez notre projet à titre d’exemple, définissez ceci sur :

YOUR_PACKAGE_ID://{yourTenant}.auth0.com/capacitor/YOUR_PACKAGE_ID/callback.

Configurer les URL de déconnexion

Une URL de déconnexion est une URL intégrée dans votre application vers laquelle vous souhaitez qu’Auth0 redirige les utilisateurs après qu’ils se sont déconnectés. Si elle n’est pas définie, les utilisateurs ne pourront pas se déconnecter de votre application et recevront un message d’erreur.

Si vous suivez notre projet à titre d'exemple, définissez ceci sur :

YOUR_PACKAGE_ID://{yourTenant}.auth0.com/capacitor/YOUR_PACKAGE_ID/callback.

Configurer les origines autorisées

Pour pouvoir faire des requêtes à partir de votre application native vers Auth0, définissez les origines autorisées suivantes dans vos paramètres d’application.

Si vous suivez notre projet faisant office d’exemple, définissez ceci sur capacitor://localhost, http://localhost pour iOS et Android respectivement.

Enfin, assurez-vous que le type d’application pour votre application est défini sur Native dans les paramètres de l’application.

+

Pour utiliser les services Auth0, vous devez avoir une application installée dans Auth0 Dashboard. L’application Auth0 est l’endroit où vous allez configurer le fonctionnement de l’authentification pour votre projet.

Tout au long de cet article, YOUR_PACKAGE_ID est l’identifiant du package de votre application. Ceci peut être trouvé et configuré dans le champ appId de votre fichier capacitor.config.ts . Voir Capacitor’s Config schema (Schéma de configuration du Capacitor) pour plus d’informations.

Configurer une application

Utilisez le sélecteur interactif pour créer une nouvelle application Auth0 ou sélectionner une application existante qui représente le projet avec lequel vous souhaitez effectuer l’intégration. Dans Auth0, il est attribué à chaque application un identifiant client unique alphanumérique que votre code d’application utilisera pour appeler les API Auth0 via la trousse SDK.

Tous les paramètres que vous configurez à l’aide de ce guide rapide seront automatiquement mis à jour pour votre application dans le Dashboard, qui est l’endroit où vous pourrez gérer vos applications à l’avenir.

Si vous préférez explorer une configuration complète, consultez plutôt un exemple d’application.

Configuration des URL de rappel

Une URL de rappel est une URL intégrée dans votre application vers laquelle vous souhaitez qu’Auth0 redirige les utilisateurs après leur authentification. Si elle n’est pas définie, les utilisateurs ne seront pas redirigés vers votre application après s’être connectés.

Si vous suivez notre projet à titre d’exemple, définissez ceci sur :

YOUR_PACKAGE_ID://{yourTenant}.auth0.com/capacitor/YOUR_PACKAGE_ID/callback.

Configuration des URL de déconnexion

Une URL de déconnexion est une URL intégrée dans votre application vers laquelle vous souhaitez qu’Auth0 redirige les utilisateurs après leur déconnexion. Si elle n’est pas définie, les utilisateurs ne pourront pas se déconnecter de votre application et recevront un message d’erreur.

Si vous suivez notre projet à titre d’exemple, définissez ceci sur :

YOUR_PACKAGE_ID://{yourTenant}.auth0.com/capacitor/YOUR_PACKAGE_ID/callback.

Configurer les origines autorisées

Pour pouvoir faire des requêtes à partir de votre application d’origine vers Auth0, définissez les origines autorisées dans vos Application Settings (Paramètres d’application).

Si vous suivez notre projet faisant office d’exemple, définissez ceci sur capacitor://localhost, http://localhost pour iOS et Android respectivement.

Enfin, assurez-vous que le type d’application pour votre application est défini sur Native dans les Application Settings (Paramètres d’application).

## Installer la trousse SDK React Auth0 -

Exécutez la commande suivante dans le répertoire de votre projet pour installer la trousse SDK React Auth0 :

npm install @auth0/auth0-react

La trousse SDK expose des méthodes et variables qui vous aident à intégrer Auth0 avec votre application React en utilisant les React Hooks (Appels React) ou les Higher-Order Components (Composants d’ordre supérieur).

Installer les plugiciels Capacitor

Ce démarrage rapide et cet exemple utilisent certains des plugiciels officiels Capacitor. Installez-les dans votre application à l’aide de la commande suivante :

npm install @capacitor/browser @capacitor/app

  • @capacitor/browser : Vous permet d’interagir avec le navigateur de système de l'appareil et est utilisé pour ouvrir l’URL vers le terminal d’autorisation de Auth0.

  • @capacitor/app : Vous permet de souscrire à des événements d’application de haut niveau, utiles pour la gestion des rappels depuis Auth0.

Le plugiciel de navigateur de Capacitor sur iOS utilise SFSafariViewController, qui sur iOS 11+ ne partage pas les témoins avec Safari sur l’appareil. Cela signifie que SSO ne fonctionnera pas sur ces appareils. Si vous avez besoin de SSO, veuillez utiliser un plugiciel compatible qui utilise ASWebAuthenticationSession.

+

Exécutez la commande suivante dans le répertoire de votre projet pour installer la trousse SDK React Auth0 :

npm install @auth0/auth0-react

La trousse SDK expose des méthodes et variables qui vous aident à intégrer Auth0 avec votre application React en utilisant les Crochets React ou les Composants d’ordre supérieur.

Installer les plugiciels Capacitor

Ce guide rapide et cet exemple utilisent certains des plugiciels officiels Capacitor. Installez-les dans votre application à l’aide de la commande suivante :

npm install @capacitor/browser @capacitor/app

  • @capacitor/browser : Vous permet d’interagir avec le navigateur de système de l’appareil, et est utilisé pour ouvrir l’URL vers le point de terminaison d’autorisation d’Auth0.

  • @capacitor/app : Vous permet de vous abonner à des événements d’application de haut niveau, utiles pour la gestion des Callbacks depuis Auth0.

Le plugiciel de navigateur de Capacitor sur iOS utilise SFSafariViewController, qui sur iOS 11+ ne partage pas les témoins avec Safari sur l’appareil. Cela signifie que SSO ne fonctionnera pas sur ces appareils. Si vous avez besoin de SSO, veuillez utiliser un plugiciel compatible qui utilise ASWebAuthenticationSession.

## Configurer le composant Auth0Provider {{{ data-action="code" data-code="index.tsx" }}} -

Au cours de son fonctionnement, la trousse SDK React Auth0 utilise React Context pour gérer l’état d’authentification de vos utilisateurs. Une façon d’intégrer Auth0 avec votre application React est d’envelopper votre composant racine avec un Auth0Provider que vous pouvez importer à partir de la trousse SDK.

Le composant Auth0Provider prend les props suivants :

  • domain : La valeur du domainprésente dans les paramètresde l’application que vous avez créée dans votre Auth0 Dashboard, ou votre domaine personnalisé si vous utilisez la fonctionnalité Domaines personnalisés d’Auth0.

  • clientId : La valeur de l’identifiant du client présente dans les paramètres de l’application que vous avez créée dans votre Auth0 Dashboard.

  • useRefreshTokens : Pour utiliser auth0-react avec Ionic sur Android et iOS, il est nécessaire d’activer les jetons d'actualisation.

  • useRefreshTokensFallback : Pour utiliser auth0-react avec Ionic sur Android et iOS, il est nécessaire de désactiver le iframe de substitution.

  • authorizationParams.redirect_uri : L’URL vers laquelle vous souhaitez rediriger vos utilisateurs après qu’ils se soient authentifiés avec Auth0.

Pour conserver l’authentification après la fermeture et la réouverture de l’application, vous pouvez définir cacheLocation sur localstorage lors de la configuration du SDK, mais soyez conscient des risques liés au stockage de jetons dans localstorage. De plus, localstorage devrait être traité comme transitoire dans l’application Capacitor car les données pourraient être récupérées de façon inattendue dans certaines circonstances. Veuillez lire les directives sur le stockage dans la documentation Capacitor.

En outre, le SDK a la capacité d’utiliser une implémentation de cache personnalisée pour stocker des jetons, si vous avez une exigence d’utiliser un mécanisme de stockage plus sûr et persistant.

Notez que nous recommandons de ne pas utiliser le plugiciel Capacitor pour stocker les jetons, car cela est soutenu par UserDefaults et SharedPreferences sur iOS et Android respectivement. Les données stockées à l’aide de ces API ne sont pas cryptées, non sécurisées et peuvent également être synchronisées dans le nuage.

Ionic & Capacitor (React) - Étape 2 - Configurer le composant Auth0Provider

Ajoutez la composante Auth0Provider d’une manière qui enveloppe votre composante App, puis exécutez votre application pour vérifier que le SDK est initialisé correctement et que votre application ne lance pas d’erreurs liées à Auth0.

+

Au cours de son fonctionnement, la trousse SDK React Auth0 utilise React Context pour gérer l’état d’authentification de vos utilisateurs. Une façon d’intégrer Auth0 avec votre application React est d’envelopper votre composant racine avec un Auth0Provider que vous pouvez importer à partir de la trousse SDK.

Le composant Auth0Provider prend les props suivants :

  • domain : La valeur du domain présente dans les paramètres de l’application que vous avez créée dans votre Auth0 Dashboard, ou votre domaine personnalisé si vous utilisez la fonctionnalité Domaines personnalisés d’Auth0.

  • clientId : La valeur de l’identifiant du client présente dans les paramètres de l’application que vous avez créée dans votre Auth0 Dashboard.

  • useRefreshTokens : Pour utiliser auth0-react avec Ionic sur Android et iOS, il est nécessaire d’activer les jetons d’actualisation.

  • useRefreshTokensFallback : Pour utiliser auth0-react avec Ionic sur Android et iOS, il est nécessaire de désactiver le iframe de substitution.

  • authorizationParams.redirect_uri : L’URL vers laquelle vous souhaitez rediriger vos utilisateurs après qu’ils se soient authentifiés avec Auth0.

Pour conserver l’authentification après la fermeture et la réouverture de l’application, vous pouvez définir cacheLocation sur localstorage lors de la configuration du SDK, mais soyez conscient des risques liés au stockage de jetons dans localstorage. De plus, localstorage devrait être traité comme transitoire dans l’application Capacitor car les données pourraient être récupérées de façon inattendue dans certaines circonstances. Veuillez lire les directives sur le stockage dans la documentation Capacitor.

En outre, le SDK a la capacité d’utiliser une implémentation de cache personnalisée pour stocker des jetons, si vous avez une exigence d’utiliser un mécanisme de stockage plus sûr et persistant.

Notez que nous recommandons de ne pas utiliser le plugiciel Capacitor pour stocker les jetons, car cela est soutenu par UserDefaults et SharedPreferences sur iOS et Android respectivement. Les données stockées à l’aide de ces API ne sont pas cryptées, non sécurisées et peuvent également être synchronisées dans le nuage.

Ionic & Capacitor (React) - Étape 4 - Configurer le composant Auth0Provider

Ajoutez le composant Auth0Provider d’une manière qui enveloppe votre composant App, puis exécutez votre application pour vérifier que le SDK est initialisé correctement et que votre application ne lance pas d’erreurs liées à Auth0.

-

Sorry about that. Here's a couple things to double check:

  • ensure the correct application is selected

  • did you save after entering your URLs?

  • make sure the domain and Client ID imported correctly

Still having issues? Check out our documentation or visit our community page to get more help.

+

Nous vous prions de nous excuser pour tout inconvénient causé. Voici quelques éléments à vérifier :

  • assurez-vous que la bonne application est sélectionnée

  • avez-vous procédé à un enregistrement après avoir saisi vos URL?

  • assurez-vous que le domaine et l’identifiant client ont été importés correctement

Vous rencontrez toujours des problèmes? Consultez notre documentation ou la page de notre communauté pour obtenir de l’aide.

## Ajouter une fonctionnalité de connexion à votre application {{{ data-action="code" data-code="login-button.tsx" }}} -

Dans une application Capacitor, le plugiciel de navigateur Capacitor effectue une redirection vers la page de connexion universelleAuth0. Définissez le paramètre openUrl sur la fonction loginWithRedirect pour utiliser Browser.open de sorte que l’URL soit ouverte à l’aide du composant navigateur du système de l’appareil (SFSafariViewController sur iOS et Chrome Custom Tabs sur Android).

Par défaut, la méthode loginWithRedirect de la trousse SDK utilise window.location.href pour accéder à la page de connexion dans l’application de navigateur par défaut sur l'appareil de l’utilisateur plutôt que dans le composant de navigateur système approprié pour la plate-forme. L’utilisateur quitterait votre application pour s’authentifier et pourrait rendre l’expérience utilisateur sous-optimale.

Ionic & Capacitor (React) - Étape 5 - Ajouter une connexion à votre application

La fonction loginWithRedirect indique à la trousse SDK d’initier le flux de connexion, en utilisant la fonction Browser.open pour ouvrir l’URL de connexion avec le composant navigateur du système de la plate-forme en définissant le paramètre openUrl . Cela permet à votre utilisateur de se connecter à votre application. Les utilisateurs sont redirigés vers la page de connexion à Auth0 et ne reçoivent aucune erreur.

+

Dans une application Capacitor, le plugiciel Capacitor’s Browser effectue une redirection vers la Universal Login Page (page de connexion universelle) d’Auth0 Auth0. Définissez le paramètre openUrl sur la fonction loginWithRedirect pour utiliser Browser.open afin que l’URL soit ouverte à l’aide du composant de navigateur système de l’appareil (SFSafariViewController sur iOS et Chrome Custom Tabs [Onglets personnalisés Chrome] sur Android).

Par défaut, la méthode loginWithRedirect de la trousse SDK utilise window.location.href pour accéder à la page de connexion dans l’application de navigateur par défaut sur l’appareil de l’utilisateur plutôt que dans le composant de navigateur système approprié pour la plate-forme. L’utilisateur quitterait votre application pour s’authentifier et pourrait rendre l’expérience utilisateur sous-optimale.

Ionic & Capacitor (React) - Étape 5 - Ajouter une connexion à votre application

La fonction loginWithRedirect indique à la trousse SDK d’initier le flux de connexion, en utilisant la fonction Browser.open pour ouvrir l’URL de connexion avec le composant navigateur du système de la plateforme en définissant le paramètre openUrl. Cela permet à votre utilisateur de se connecter à votre application. Les utilisateurs sont redirigés vers la page de connexion à Auth0 et ne reçoivent aucune erreur.

-

Sorry about that. Here's a couple things to double check:

  • ensure that there are no errors in the browser's console window at the point of login

  • ensure the domain and Client ID are correct according to your Auth0 application in the dashboard

  • if you are redirected to Auth0 and receive an error page, check the "technical details" section at the bottom for the reason for the failure

+

Nous vous prions de nous excuser pour tout inconvénient causé. Voici quelques éléments à vérifier :

  • assurez-vous qu’il n’y a pas d’erreurs dans la fenêtre de la console du navigateur au point de connexion

  • assurez-vous que le domaine et l’identifiant client sont corrects selon votre application Auth0 dans le tableau de bord

  • si vous êtes redirigé vers Auth0 et recevez une page d’erreur, consultez la section « détails techniques » en bas pour connaître la raison de l’échec

## Gérer le rappel de connexion {{{ data-action="code" data-code="app.tsx" }}} -

Une fois que les utilisateurs se connectent avec la page de connexion universelle, ils se redirigent vers votre application via une URL avec un schéma d’URL personnalisé. L’événement appUrlOpen doit être géré dans votre application. Vous pouvez appeler la méthode handleRedirectCallback à partir de la trousse SDK Auth0 pour initialiser l’état d’authentification.

Vous pouvez utiliser cette méthode uniquement sur une redirection depuis Auth0. Pour vérifier le succès, vérifiez la présence des paramètres code et state dans l’URL.

La méthode Browser.close() devrait fermer le navigateur lorsque cet événement est déclenché.

Cet article suppose que vous utiliserez des schémas d’URL personnalisés pour gérer le rappel dans votre application. Pour ce faire, enregistrez votre YOUR_PACKAGE_ID comme schéma d’URL pour la plateforme de votre choix. Pour en savoir plus, lire Defining a Custom URL Scheme (Définition d’un schéma d’URL personnalisé) pour iOS ou Create Deep Links to App Content (Création de liens profonds vers le contenu des applications) pour Android.

Ionic & Capacitor (React) - Étape 6 - Gérer le rappel de connexion

Ajoutez l’appUrlOpen au composant App de votre application et connectez-vous. La fenêtre du navigateur devrait se fermer une fois que l’utilisateur s’authentifie et se connecte à votre application.

+

Une fois que les utilisateurs sont connectés avec la page de connexion universelle, ils sont redirigés vers votre application au moyen d’une URL avec un schéma d’URL personnalisé. L’événement appUrlOpen doit être traité au sein de votre application. Vous pouvez appeler la méthode handleRedirectCallback à partir de la trousse SDK Auth0 pour initialiser l’état d’authentification.

Vous pouvez utiliser cette méthode uniquement sur une redirection depuis Auth0. Vérifiez que les paramètres code et state sont présents dans l’URL.

La méthode Browser.close() devrait fermer le navigateur lorsque cet événement est déclenché.

Cet article suppose que vous utiliserez des schémas d’URL personnalisés pour gérer le rappel dans votre application. Pour ce faire, enregistrez votre YOUR_PACKAGE_ID comme schéma d’URL pour la plateforme de votre choix. Pour en savoir plus, lire Defining a Custom URL Scheme (Définition d’un schéma d’URL personnalisé) pour iOS ou Create Deep Links to App Content (Création de liens profonds vers le contenu des applications) pour Android.

Ionic & Capacitor (React) - Étape 6 - Gérer le rappel de connexion

Ajoutez appUrlOpen au composant App de votre application et connectez-vous. La fenêtre du navigateur devrait se fermer une fois que l’utilisateur s’authentifie et se connecte à votre application.

-

Sorry about that. Here's a couple things to double check:

+

Nous vous prions de nous excuser pour tout inconvénient causé. Voici quelques éléments à vérifier :

## Ajouter une fonctionnalité de déconnexion à votre application {{{ data-action="code" data-code="logout-button.tsx" }}} -

Maintenant que les utilisateurs peuvent se connecter, vous devez configurer une façon de se déconnecter. Les utilisateurs doivent se rediriger vers le terminal de connexion Auth0 dans le navigateur pour effacer leur session de navigation. Encore une fois, le plugiciel du navigateur de Capacitor devrait effectuer cette redirection afin que l’utilisateur ne quitte pas votre application et ne vive pas une expérience sous-optimale.

Pour y parvenir avec Ionic et Capacitor en conjonction avec le SDK Auth0 :

  • Construire l’URL de votre application Auth0 devrait utiliser pour rediriger vers après la déconnexion. Il s’agit d’une URL qui utilise votre schéma personnalisé enregistré et le domaine Auth0. Ajoutez-le à votre configuration d’URLs de déconnexions permises dans le Auth0 Dashboard

  • Déconnectez-vous du SDK en appelant logout et passez votre URL de redirection comme paramètre logoutParams.returnTo .

  • Définir le paramètre openUrl sur un rappel qui utilise le plugiciel de navigateur Capacitor pour ouvrir l’URL à l’aide de Browser.open.

De la même manière que pour l’étape de connexion, si vous ne définissez pas openUrl lors de l'appel de logout, le SDK redirige l’utilisateur vers l’URL de déconnexion à l’aide de l’application de navigateur par défaut sur l’appareil, ce qui offre une expérience utilisateur sous-optimale.

Ionic & Capacitor (React) - Étape 7 - Ajouter une déconnexion à votre application

Permettre à vos utilisateurs de se déconnecter de votre application. Vérifiez que vous redirigez vers Auth0, puis vers l’adresse spécifiée dans le paramètre returnTo. Vérifiez que vous n’êtes plus connecté à votre application.

+

Maintenant que les utilisateurs peuvent se connecter, vous devez configurer une façon de se déconnecter. Les utilisateurs doivent être redirigés vers le point de terminaison de déconnexion Auth0 dans le navigateur pour effacer leur session de navigation. Encore une fois, le plugiciel du navigateur de Capacitor doit effectuer cette redirection afin que l’utilisateur ne quitte pas votre application et ne vive pas une expérience frustrante.

Pour y parvenir avec Ionic et Capacitor en conjonction avec le SDK Auth0 :

  • Créez l’URL de votre application vers laquelle Auth0 doit rediriger après la déconnexion. Il s’agit d’une URL qui utilise votre schéma personnalisé enregistré et le domaine Auth0. Ajoutez-la à votre configuration URL de déconnexions autorisées dans Auth0 Dashboard

  • Déconnectez-vous de la trousse SDK en appelant logout et transmettez votre URL de redirection comme paramètre logoutParams.returnTo.

  • Définissez le paramètre openUrl sur un callback qui utilise le plugiciel de navigateur Capacitor pour ouvrir l’URL à l’aide de Browser.open.

De la même manière que pour l’étape de connexion, si vous ne définissez pas openUrl lors de l’appel de logout, le SDK redirige l’utilisateur vers l’URL de déconnexion à l’aide de l’application de navigateur par défaut sur l’appareil, ce qui offre une expérience utilisateur sous-optimale.

Ionic & Capacitor (React) - Étape 7 - Ajouter une déconnexion à votre application

Fournir un moyen pour vos utilisateurs de se déconnecter de votre application. Vérifiez que vous redirigez vers Auth0, puis vers l’adresse spécifiée dans le paramètre returnTo. Vérifiez que vous n’êtes plus connecté à votre application.

@@ -80,10 +80,10 @@ locale: fr-CA ## Afficher le profil utilisateur {{{ data-action="code" data-code="user-profile.tsx" }}} -

La trousse SDK React Auth0 récupère le profil utilisateur associé aux utilisateurs connectés dans n’importe quel composant dont vous avez besoin, comme leur nom ou leur image de profil, pour personnaliser l’interface utilisateur. Les informations de profil sont disponibles via la propriété user exposée par l'appel useAuth0().

L’initialisation de la trousse SDK est asynchrone, et vous devez protéger le profil utilisateur en vérifiant les propriétés isLoading et user. Une fois que isLoading est false et que le user a une valeur, le profil d’utilisateur peut être utilisé.

Ionic & Capacitor (React) - Étape 8 - Afficher le profil utilisateur

Permettre à vos utilisateurs de voir leurs détails de leur profil utilisateur dans l’application et vérifier que vous êtes en mesure de récupérer et de voir les informations de votre profil à l’écran une fois que vous avez ouvert une session.

+

La trousse SDK React Auth0 récupère le user’s profile (profil utilisateur) associé aux utilisateurs connectés dans n’importe quel composant dont vous avez besoin, comme leur nom ou leur image de profil, pour personnaliser l’interface utilisateur. Les informations de profil sont accessibles via la propriété user exposée par l’appel useAuth0().

L’initialisation de la trousse SDK est asynchrone, et vous devez protéger le profil utilisateur en activant les propriétés isLoading et user. Une fois que isLoading est false et que user a une valeur, le profil utilisateur peut être utilisé.

Ionic & Capacitor (React) - Étape 8 - Afficher le profil utilisateur

Fournir un moyen pour que vos utilisateurs puissent voir leurs détails de profil utilisateur dans l’application et vérifiez que vous êtes en mesure de récupérer et d’afficher les informations de votre profil à l’écran une fois que vous avez ouvert une session.

-

Sorry about that. Here's a couple things to double check:

  • check that you are only reading the user's profile when isLoading is false

  • check that user resolves to an object and is not undefined

+

Nous vous prions de nous excuser pour tout inconvénient causé. Voici quelques éléments à vérifier :

  • vérifiez que vous lisez uniquement le profil utilisateur lorsque isLoading est false

  • vérifiez que user résout un objet et n’est pas undefined.

diff --git a/fr-ca/articles/quickstart/native/ionic-vue/interactive.md b/fr-ca/articles/quickstart/native/ionic-vue/interactive.md index a1d872a455..2202e5d0b6 100644 --- a/fr-ca/articles/quickstart/native/ionic-vue/interactive.md +++ b/fr-ca/articles/quickstart/native/ionic-vue/interactive.md @@ -9,78 +9,78 @@ files: - files/App - files/UserProfile github: - path: https://github.com/auth0-samples/auth0-ionic-samples/tree/main/vue + path: vue locale: fr-CA --- # Ajouter la connexion à votre application Ionic Vue avec l’application Capacitor -

Auth0 vous permet d’ajouter rapidement l’authentification et de pouvoir accéder aux informations relatives au profil utilisateur dans votre application. Ce guide montre comment intégrer Auth0 avec une application Ionic (Vue) et Capacitor en utilisant la trousse SDK Vue Auth0.

+

Auth0 vous permet d’ajouter rapidement l’authentification et de pouvoir accéder aux informations relatives au profil utilisateur dans votre application. Ce guide montre comment intégrer Auth0 avec une application Ionic (Vue) et Capacitor en utilisant la trousse SDK Vue Auth0.

-## Premiers pas +## Démarrage -

Ce guide rapide suppose que vous avez déjà une application Ionic en cours d’exécution avec Capacitor. Si ce n’est pas le cas, consultez le guide Using Capacitor with Ionic Framework guideguide (Utiliser Capacitor avec Ionic Framework) pour commencer avec une application simple ou clonez nos exemples d’applications.

Vous devez également connaître le Flux de travail de développement Capacitor.

+

Ce guide de démarrage rapide suppose que vous avez déjà une application Ionic en cours d’exécution avec Capacitor. Si ce n’est pas le cas, consultez Utiliser Capacitor avec Ionic Framework pour commencer avec une application simple ou clonez nos our sample apps (exemples d’applications).

Vous devez également être familiarisé avec Capacitor development workflow (le flux de production de développement Capacitor).

-## Configurer Auth0 +## Configuration d’Auth0 -

Pour utiliser les services Auth0, vous devez avoir une application installée dans Auth0 Dashboard. Vous allez configurer l’authentification pour votre projet dans l’application Auth0.

Tout au long de cet article, YOUR_PACKAGE_ID est l’identificateur du package de votre application. Il peut être trouvé et configuré dans le champ appId de votre fichier capacitor.config.ts. Voir Schéma de configuration de Capacitor pour plus d’informations.

Configurer une application

Utilisez le sélecteur interactif pour créer une nouvelle application Auth0 ou sélectionner une application existante qui représente le projet avec lequel vous souhaitez vous intégrer. Dans Auth0, il est attribué à chaque application un identifiant client unique alphanumérique que votre code d’application utilisera pour appeler les API Auth0 via la trousse SDK.

Tous les paramètres que vous configurez à l’aide de ce guide rapide seront automatiquement mis à jour pour votre application dans le Dashboard, où vous pourrez gérer vos applications à l’avenir.

Si vous préférez explorer une configuration complète, consultez plutôt un exemple d’application.

Configuration des Callback URL

Une Callback URL est une URL intégrée dans votre application vers laquelle vous souhaitez qu’Auth0 redirige les utilisateurs après leur authentification. Si elle n’est pas définie, les utilisateurs ne seront pas redirigés vers votre application après s’être connectés.

Si vous suivez notre projet à titre d’exemple, définissez ceci sur YOUR_PACKAGE_ID://{yourDomain}/capacitor/YOUR_PACKAGE_ID/callback

Configurer les URL de déconnexion

Une URL de déconnexion est une URL intégrée dans votre application vers laquelle vous souhaitez qu’Auth0 redirige les utilisateurs après leur déconnexion. Si elle n’est pas définie, les utilisateurs ne pourront pas se déconnecter de votre application et recevront un message d’erreur.

Si vous suivez notre projet à titre d’exemple, définissez ceci sur YOUR_PACKAGE_ID://{yourDomain}/capacitor/YOUR_PACKAGE_ID/callback.

Configurer les origines autorisées

Pour pouvoir faire des requêtes à partir de votre application native vers Auth0, définissez les origines autorisées suivantes dans vos Application Settings (Paramètres d’application).

Si vous suivez notre projet à titre d’exemple, définissez ceci sur capacitor://localhost, http://localhost pour iOS et Android respectivement.

Enfin, assurez-vous que le type d’application pour votre application est défini sur Native dans les paramètres d’application.

+

Pour utiliser les services Auth0, vous devez avoir une application installée dans Auth0 Dashboard. L’application Auth0 est l’endroit où vous allez configurer le fonctionnement de l’authentification pour votre projet.

Tout au long de cet article, YOUR_PACKAGE_ID est l’identificateur du package de votre application. Il peut être trouvé et configuré dans le champ appId de votre fichier capacitor.config.ts. Voir Schéma de configuration de Capacitor pour plus d’informations.

Configurer une application

Utilisez le sélecteur interactif pour créer une nouvelle application Auth0 ou sélectionner une application existante qui représente le projet avec lequel vous souhaitez effectuer l’intégration. Dans Auth0, il est attribué à chaque application un identifiant client unique alphanumérique que votre code d’application utilisera pour appeler les API Auth0 via la trousse SDK.

Tous les paramètres que vous configurez à l’aide de ce guide rapide seront automatiquement mis à jour pour votre application dans le Dashboard, qui est l’endroit où vous pourrez gérer vos applications à l’avenir.

Si vous préférez explorer une configuration complète, consultez plutôt un exemple d’application.

Configurer les URL de rappel

Une URL de rappel est une URL intégrée dans votre application vers laquelle vous souhaitez qu’Auth0 redirige les utilisateurs après leur authentification. Si elle n’est pas définie, les utilisateurs ne seront pas redirigés vers votre application après s’être connectés.

Si vous suivez notre projet à titre d’exemple, définissez ceci sur YOUR_PACKAGE_ID://{yourDomain}/capacitor/YOUR_PACKAGE_ID/callback

Configuration des URL de déconnexion

Une URL de déconnexion est une URL intégrée dans votre application vers laquelle vous souhaitez qu’Auth0 redirige les utilisateurs après leur déconnexion. Si elle n’est pas définie, les utilisateurs ne pourront pas se déconnecter de votre application et recevront un message d’erreur.

Si vous suivez notre projet à titre d’exemple, définissez ceci sur YOUR_PACKAGE_ID://{yourDomain}/capacitor/YOUR_PACKAGE_ID/callback.

Configurer les origines autorisées

Pour pouvoir faire des requêtes à partir de votre application d’origine vers Auth0, définissez les origines autorisées dans vos Application Settings (Paramètres d’application).

Si vous suivez notre projet à titre d’exemple, définissez ceci sur capacitor://localhost, http://localhost pour iOS et Android respectivement.

Enfin, assurez-vous que le type d’application pour votre application est défini sur Native dans les Application Settings (Paramètres d’application).

## Installer la trousse SDK Vue Auth0 -

Exécutez la commande suivante dans le répertoire de votre projet pour installer la trousse SDK Vue Auth0 :

npm install @auth0/auth0-vue

La trousse SDK expose plusieurs types qui vous aident à intégrer Auth0 avec votre application Vue, y compris un module et un service d’authentification.

Installer les plugiciels Capacitor

Ce guide rapide et cet exemple utilisent certains des plugiciels officiels Capacitor. Installez-les dans votre application à l’aide de la commande suivante :

npm install @capacitor/browser @capacitor/app

  • @capacitor/browser : vous permet d’interagir avec le navigateur de système de l’appareil et est utilisé pour ouvrir l’URL vers le point de terminaison d’autorisation de Auth0

  • @capacitor/app : vous permet de souscrire à des événements d’application de haut niveau, utiles pour la gestion des callbacks depuis Auth0

Le plugiciel de navigateur de Capacitor sur iOS utilise SFSafariViewController, qui sur iOS 11+ ne partage pas les témoins avec Safari sur l’appareil. Cela signifie que SSO ne fonctionnera pas sur ces appareils. Si vous avez besoin de SSO, veuillez utiliser un plugiciel compatible qui utilise ASWebAuthenticationSession.

+

Exécutez la commande suivante dans le répertoire de votre projet pour installer la trousse SDK Vue Auth0 :

npm install @auth0/auth0-vue

La trousse SDK expose plusieurs types qui vous aident à intégrer Auth0 avec votre application Vue, y compris un module et un service d’authentification.

Installer les plugiciels Capacitor

Ce guide rapide et cet exemple utilisent certains des plugiciels officiels Capacitor. Installez-les dans votre application à l’aide de la commande suivante :

npm install @capacitor/browser @capacitor/app

  • @capacitor/browser : vous permet d’interagir avec le navigateur de système de l’appareil et est utilisé pour ouvrir l’URL vers le point de terminaison d’autorisation de Auth0

  • @capacitor/app : vous permet de souscrire à des événements d’application de haut niveau, utiles pour la gestion des Callbacks depuis Auth0

Le plugiciel de navigateur de Capacitor sur iOS utilise SFSafariViewController, qui sur iOS 11+ ne partage pas les témoins avec Safari sur l’appareil. Cela signifie que SSO ne fonctionnera pas sur ces appareils. Si vous avez besoin de SSO, veuillez utiliser un plugiciel compatible qui utilise ASWebAuthenticationSession.

## Configurer le plugiciel CreateAuht0 {{{ data-action="code" data-code="main.ts" }}} -

La trousse SDK exporte createAuth0, un composable qui contient tous les services nécessaires au fonctionnement du SDK. Ce composable doit être enregistré avec votre application et être configuré avec votre domaine Auth0 et votre ID client.

Le composable createAuth0 prend la configuration suivante :

  • domain : la valeur domain présente dans les Settings (Paramètres) de l’application que vous avez créée dans le Auth0 Dashboard, ou votre domaine personnalisé si vous utilisez la fonctionnalité de domaines personnalisés d'Auth0.

  • clientId : la valeur de l’identificateur client présente dans les Settings (Paramètres) de l’application que vous avez créée dans l'Auth0 Dashboard.

  • useRefreshTokens : pour utiliser auth0-vue avec Ionic sur Android et iOS, il est nécessaire d’activer les jetons d’actualisation.

  • useRefreshTokensFallback : pour utiliser auth0-vue avec Ionic sur Android et iOS, il est nécessaire de désactiver le iframe de substitution.

  • authorizationParams.redirect_uri : URL pour rediriger vos utilisateurs après qu’ils se sont authentifiés avec Auth0.

Pour conserver l’authentification après la fermeture et la réouverture de l’application, vous pouvez définir cacheLocation sur localstorage lors de la configuration de la trousse SDK, mais soyez conscient des risques liés au stockage de jetons dans localstorage. De plus, localstorage devrait être traité comme transitoire dans l’application Capacitor car les données pourraient être récupérées de façon inattendue dans certaines circonstances. Veuillez lire les directives sur le stockage dans la documentation Capacitor.

En outre, la trousse SDK a la capacité d’utiliser une implémentation de cache personnalisée pour stocker des jetons, si vous avez une exigence d’utiliser un mécanisme de stockage plus sûr et persistant.

Notez que nous recommandons de ne pas utiliser le plugiciel Capacitor pour stocker les jetons, car cela est soutenu par UserDefaults et SharedPreferences sur iOS et Android respectivement. Les données stockées à l’aide de ces API ne sont pas chiffrées, non sécurisées et peuvent également être synchronisées dans le nuage.

Guide rapide Ionic - Étape 4 - Point de contrôle

Maintenant que vous avez configuré votre application avec la trousse SDK Vue Auth0, exécutez votre application pour vérifier que la trousse SDK est initialisée sans erreur et que votre application s’exécute comme auparavant.

+

La trousse SDK exporte createAuth0, un composable qui contient tous les services nécessaires au fonctionnement du SDK. Ce composable doit être enregistré avec votre application et être configuré avec votre domaine Auth0 et votre ID client.

Le composable createAuth0 prend la configuration suivante :

  • domain : La valeur domain présente dans les Settings (Paramètres) de l’application que vous avez créée dans le Auth0 Dashboard, ou votre domaine personnalisé si vous utilisez la fonctionnalité de domaines personnalisés d’Auth0.

  • clientId : La valeur de l’identificateur client présente dans les Settings (Paramètres) de l’application que vous avez créée dans l’Auth0 Dashboard.

  • useRefreshTokens : Pour utiliser auth0-vue avec Ionic sur Android et iOS, il est nécessaire d’activer les jetons d’actualisation.

  • useRefreshTokensFallback : Pour utiliser auth0-vue avec Ionic sur Android et iOS, il est nécessaire de désactiver le iframe de substitution.

  • authorizationParams.redirect_uri : URL pour rediriger vos utilisateurs après qu’ils se sont authentifiés avec Auth0.

Pour conserver l’authentification après la fermeture et la réouverture de l’application, vous pouvez définir cacheLocation sur localstorage lors de la configuration de la trousse SDK, mais soyez conscient des risques liés au stockage de jetons dans localstorage. De plus, localstorage devrait être traité comme transitoire dans l’application Capacitor car les données pourraient être récupérées de façon inattendue dans certaines circonstances. Veuillez lire les directives sur le stockage dans la documentation Capacitor.

En outre, la trousse SDK a la capacité d’utiliser une implémentation de cache personnalisée pour stocker des jetons, si vous avez une exigence d’utiliser un mécanisme de stockage plus sûr et persistant.

Notez que nous recommandons de ne pas utiliser le plugiciel Capacitor pour stocker les jetons, car cela est soutenu par UserDefaults et SharedPreferences sur iOS et Android respectivement. Les données stockées à l’aide de ces API ne sont pas chiffrées, non sécurisées et peuvent également être synchronisées dans le nuage.

Démarrage rapide Ionic - Étape 4 - Point de contrôle

Maintenant que vous avez configuré votre application avec la trousse SDK Vue Auth0, exécutez votre application pour vérifier que la trousse SDK est initialisée sans erreur et que votre application s’exécute comme auparavant.

-

Sorry about that. Here's a couple things to double check:

  • ensure the correct application is selected

  • did you save after entering your URLs?

  • make sure the domain and Client ID imported correctly

Still having issues? Check out our documentation or visit our community page to get more help.

+

Nous vous prions de nous excuser pour tout inconvénient causé. Voici quelques éléments à vérifier :

  • assurez-vous que la bonne application est sélectionnée

  • avez-vous procédé à un enregistrement après avoir saisi vos URL?

  • assurez-vous que le domaine et l’identifiant client ont été importés correctement

Vous rencontrez toujours des problèmes? Consultez notre documentation ou la page de notre communauté pour obtenir de l’aide.

## Ajouter une fonctionnalité de connexion à votre application {{{ data-action="code" data-code="LoginButton.vue" }}} -

Dans une application Capacitor, le plugiciel de navigateur Capacitor effectue une redirection vers la page de connexion universelleAuth0. Définissez le paramètre openUrl sur la fonction loginWithRedirect pour utiliser Browser.open de sorte que l’URL soit ouverte à l’aide du composant navigateur du système de l’appareil (SFSafariViewController sur iOS et Chrome Custom Tabs sur Android).

Par défaut, la méthode loginWithRedirect de la trousse SDK utilise window.location.href pour accéder à la page de connexion dans l’application de navigateur par défaut sur l’appareil de l’utilisateur plutôt que dans le composant de navigateur système approprié pour la plateforme. L’utilisateur quitterait votre application pour s’authentifier et pourrait rendre l’expérience utilisateur frustrante.

Ionic - Étape 5 - Point de contrôle

La fonction loginWithRedirect indique à la trousse SDK d’initier le flux de connexion, en utilisant la fonction Browser.open pour ouvrir l’URL de connexion avec le composant navigateur du système de la plateforme en définissant le paramètre openUrl . Cela permet à votre utilisateur de se connecter à votre application. Les utilisateurs sont redirigés vers la page de connexion à Auth0 et ne reçoivent aucune erreur.

+

Dans une application Capacitor, le plugicielCapacitor’s Browser effectue une redirection vers la Universal Login Page (page de connexion universelle) Auth0. Définissez le paramètre openUrl sur la fonction loginWithRedirect pour utiliser Browser.open afin que l’URL soit ouverte à l’aide du composant de navigateur système de l’appareil (SFSafariViewController sur iOS et Chrome Custom Tabs [Onglets personnalisés Chrome] sur Android).

Par défaut, la méthode loginWithRedirect de la trousse SDK utilise window.location.href pour accéder à la page de connexion dans l’application de navigateur par défaut sur l’appareil de l’utilisateur plutôt que dans le composant de navigateur système approprié pour la plateforme. L’utilisateur quitterait votre application pour s’authentifier et pourrait rendre l’expérience utilisateur frustrante.

Ionic – Étape 5 – Point de contrôle

La fonction loginWithRedirect indique à la trousse SDK d’initier le flux de connexion, en utilisant la fonction Browser.open pour ouvrir l’URL de connexion avec le composant navigateur du système de la plateforme en définissant le paramètre openUrl. Cela permet à votre utilisateur de se connecter à votre application. Les utilisateurs sont redirigés vers la page de connexion à Auth0 et ne reçoivent aucune erreur.

-

Sorry about that. Here's a couple things to double check:

  • ensure that there are no errors in the browser's console window at the point of login

  • ensure the domain and Client ID are correct according to your Auth0 application in the dashboard

  • if you are redirected to Auth0 and receive an error page, check the "technical details" section at the bottom for the reason for the failure

+

Nous vous prions de nous excuser pour tout inconvénient causé. Voici quelques éléments à vérifier :

  • assurez-vous qu’il n’y a pas d’erreurs dans la fenêtre de la console du navigateur au point de connexion

  • assurez-vous que le domaine et l’identifiant client sont corrects selon votre application Auth0 dans le tableau de bord

  • si vous êtes redirigé vers Auth0 et recevez une page d’erreur, vérifiez la section des « détails techniques » en bas de la page pour connaître la raison de l’échec

-## Gérer le callback de connexion {{{ data-action="code" data-code="App.vue" }}} +## Gérer le rappel de connexion {{{ data-action="code" data-code="App.vue" }}} -

Une fois que les utilisateurs sont connectés avec la page de connexion universelle, ils sont redirigés vers votre application via une URL avec un schéma d’URL personnalisé. L’événement appUrlOpen doit être géré dans votre application. Vous pouvez appeler la méthode handleRedirectCallback à partir de la trousse SDK Auth0 pour initialiser l’état d’authentification.

Vous pouvez utiliser cette méthode uniquement sur une redirection depuis Auth0. Pour vérifier le succès, vérifiez la présence du code et des paramètres state dans l’URL.

La méthode Browser.close() devrait fermer le navigateur lorsque cet événement est déclenché.

Cet article suppose que vous utiliserez des schémas d’URL personnalisés pour gérer le callback dans votre application. Pour ce faire, enregistrez votre YOUR_PACKAGE_ID comme schéma d’URL pour la plateforme de votre choix. Pour en savoir plus, lisez Définition d’un schéma d’URL personnalisé pour iOS ou Création de liens profonds vers le contenu des applications pour Android.

Ionic - Étape 6 - Point de contrôle

Ajoutez appUrlOpen au composant App de votre application et connectez-vous. La fenêtre du navigateur devrait se fermer une fois que l’utilisateur s’authentifie et se connecte à votre application.

+

Une fois que les utilisateurs sont connectés avec la page de connexion universelle, ils sont redirigés vers votre application au moyen d’une URL avec un schéma d’URL personnalisé. L’événement appUrlOpen doit être traité au sein de votre application. Vous pouvez appeler la méthode handleRedirectCallback à partir de la trousse SDK Auth0 pour initialiser l’état d’authentification.

Vous pouvez utiliser cette méthode uniquement sur une redirection depuis Auth0. Vérifiez que les paramètres code et state sont présents dans l’URL.

La méthode Browser.close() devrait fermer le navigateur lorsque cet événement est déclenché.

Cet article suppose que vous utiliserez des schémas d’URL personnalisés pour gérer le callback dans votre application. Pour ce faire, enregistrez votre YOUR_PACKAGE_ID comme schéma d’URL pour la plateforme de votre choix. Pour en savoir plus, lisez Définition d’un schéma d’URL personnalisé pour iOS ou Création de liens profonds vers le contenu des applications pour Android.

Ionic - Étape 6 - Point de contrôle

Ajoutez appUrlOpen au composant App de votre application et connectez-vous. La fenêtre du navigateur devrait se fermer une fois que l’utilisateur s’authentifie et se connecte à votre application.

-

Sorry about that. Here's a couple things to double check:

+

Nous vous prions de nous excuser pour tout inconvénient causé. Voici quelques éléments à vérifier :

## Ajouter une fonctionnalité de déconnexion à votre application {{{ data-action="code" data-code="LogoutButton.vue" }}} -

Maintenant que les utilisateurs peuvent se connecter, vous devez configurer une façon de se déconnecter. Les utilisateurs doivent être redirigés vers le point de terminaison de déconnexion Auth0 dans le navigateur pour effacer leur session de navigation. Encore une fois, le plugiciel du navigateur de Capacitor doit effectuer cette redirection afin que l’utilisateur ne quitte pas votre application et ne vive pas une expérience frustrante.

Pour y parvenir avec Ionic et Capacitor en conjonction avec le SDK Auth0 :

  • Créez l’URL de votre application vers laquelle Auth0 doit rediriger après la déconnexion. Il s’agit d’une URL qui utilise votre schéma personnalisé enregistré et le domaine Auth0. Ajoutez-la à votre configuration Allowed Logout URLs URL de déconnexions autorisées dans Auth0 Dashboard

  • Déconnectez-vous de la trousse SDK en appelant logout et transmettez votre URL de redirection comme paramètre logoutParams.returnTo.

  • Définissez le paramètre openUrl sur un callback qui utilise le plugiciel de navigateur Capacitor pour ouvrir l’URL à l’aide de Browser.open.

De la même manière que pour l’étape de connexion, si vous ne définissez pas openUrl lors de l’appel de logout, la trousse SDK redirige l’utilisateur vers l’URL de déconnexion à l’aide de l’application de navigateur par défaut sur l’appareil, ce qui offre une expérience utilisateur sous-optimale.

Ionic - Étape 7 - Point de contrôle

Fournir un moyen pour vos utilisateurs de se déconnecter de votre application. Vérifiez que vous redirigez vers Auth0, puis vers l’adresse spécifiée dans le paramètre returnTo . Vérifiez que vous n’êtes plus connecté à votre application.

+

Maintenant que les utilisateurs peuvent se connecter, vous devez configurer une façon de se déconnecter. Les utilisateurs doivent être redirigés vers le point de terminaison de déconnexion Auth0 dans le navigateur pour effacer leur session de navigation. Encore une fois, le plugiciel du navigateur de Capacitor doit effectuer cette redirection afin que l’utilisateur ne quitte pas votre application et ne vive pas une expérience frustrante.

Pour y parvenir avec Ionic et Capacitor en conjonction avec le SDK Auth0 :

  • Créez l’URL de votre application vers laquelle Auth0 doit rediriger après la déconnexion. Il s’agit d’une URL qui utilise votre schéma personnalisé enregistré et le domaine Auth0. Ajoutez-la à votre configuration URL de déconnexions autorisées dans Auth0 Dashboard

  • Déconnectez-vous de la trousse SDK en appelant logout et transmettez votre URL de redirection comme paramètre logoutParams.returnTo.

  • Définissez le paramètre openUrl sur un callback qui utilise le plugiciel de navigateur Capacitor pour ouvrir l’URL à l’aide de Browser.open.

De la même manière que pour l’étape de connexion, si vous ne définissez pas openUrl lors de l’appel de logout, la trousse SDK redirige l’utilisateur vers l’URL de déconnexion à l’aide de l’application de navigateur par défaut sur l’appareil, ce qui offre une expérience utilisateur sous-optimale.

Ionic - Étape 7 - Point de contrôle

Fournir un moyen pour vos utilisateurs de se déconnecter de votre application. Vérifiez que vous redirigez vers Auth0, puis vers l’adresse spécifiée dans le paramètre returnTo. Vérifiez que vous n’êtes plus connecté à votre application.

-

Sorry about that. Here's a couple things to double check:

  • check that the URL you provided to in the returnTo parameter is registered as an allowed callback URL in your Auth0 Dashboard

+

Nous vous prions de nous excuser pour tout inconvénient causé. Voici quelques éléments à vérifier :

  • vérifiez que l’URL que vous avez fournie dans le paramètre returnTo est enregistrée comme URL de rappel autorisée dans votre Tableau de bord Auth0

## Afficher le profil utilisateur {{{ data-action="code" data-code="UserProfile.vue" }}} -

La trousse SDK Vue Auth0 récupère le profil utilisateur associé aux utilisateurs connectés dans n’importe quel composant dont vous avez besoin, comme leur nom ou leur image de profil, pour personnaliser l’interface utilisateur. Les informations de profil sont disponibles via la propriété user exposée par le composable useAuth0().

L’initialisation de la trousse SDK est asynchrone, et vous devez protéger le profil utilisateur en activant les propriétés isLoading et user. Une fois que isLoading est false et que user a une valeur, le profil utilisateur peut être utilisé.

Ionic - Étape 8 - Point de contrôle

Fournir un moyen pour que vos utilisateurs puissent voir leurs détails de profil utilisateur dans l’application et vérifiez que vous êtes en mesure de récupérer et de voir les informations de votre profil à l’écran une fois que vous avez ouvert une session.

+

La trousse SDK Vue Auth0 récupère le profil utilisateur associé aux utilisateurs connectés dans n’importe quel composant dont vous avez besoin, comme leur nom ou leur image de profil, pour personnaliser l’interface utilisateur. Les informations de profil sont accessibles à partir de la propriété user exposée par la fonction composable useAuth0().

L’initialisation de la trousse SDK est asynchrone, et vous devez protéger le profil utilisateur en activant les propriétés isLoading et user. Une fois que isLoading est false et que user a une valeur, le profil utilisateur peut être utilisé.

Ionic - Étape 8 - Point de contrôle

Assurez-vous que vos utilisateurs ont un moyen de consulter leurs informations de profil dans l’application et vérifiez que vous êtes en mesure de récupérer et d’afficher les informations de votre profil à l’écran une fois que vous vous êtes connecté.

diff --git a/fr-ca/articles/quickstart/native/ios-swift/interactive.md b/fr-ca/articles/quickstart/native/ios-swift/interactive.md index 64f69f191a..873bf12474 100644 --- a/fr-ca/articles/quickstart/native/ios-swift/interactive.md +++ b/fr-ca/articles/quickstart/native/ios-swift/interactive.md @@ -8,19 +8,19 @@ files: - files/ProfileView - files/User github: - path: https://github.com/auth0-samples/auth0-ios-swift-sample/tree/master/Sample-01 + path: Sample-01 locale: fr-CA --- # Ajouter une connexion à votre application iOS ou macOS -

Ce guide explique comment ajouter l’authentification et accéder aux informations du profil utilisateur dans n’importe quelle application iOS/macOS à l’aide du SDK Auth0.swift.

Pour utiliser ce guide rapide, vous devez:

  • Vous inscrire pour avoir un compte Auth0 gratuit ou vous connecter à Auth0.

  • Avoir une application iOS/macOS existante que vous souhaitez intégrer Vous pouvez également consulter ou télécharger une application faisant office d’exemple lorsque vous vous connectez.

+

Ce guide explique comment ajouter l’authentification et accéder aux informations du profil utilisateur dans n’importe quelle application iOS/macOS à l’aide du SDK Auth0.swift.

Pour utiliser ce guide rapide, vous devez :

  • vous inscrire à un compte Auth0 gratuit ou vous connecter à Auth0.

  • avoir une application iOS/macOS existante que vous souhaitez intégrer. Vous pouvez également consulter ou télécharger une application faisant office d’exemple lorsque vous vous connectez.

-## Configurer Auth0 +## Configuration d’Auth0 -

Pour utiliser les services Auth0, vous devez avoir une application configurée dans Auth0 Dashboard. L’application Auth0 est l’endroit où vous allez configurer le fonctionnement de l’authentification pour l’application que vous développez.

Configurer une application Auth0.

Utilisez le sélecteur interactif pour créer une nouvelle application Auth0 ou sélectionner une application Auth0 Native existante. Auth0 attribue à chaque application un ID client unique alphanumérique que votre application utilise pour appeler les API Auth0 via la trousse SDK.

Tous les paramètres que vous configurez à l’aide de ce démarrage rapide met automatiquement à jour votre application Auth0 dans le Dashboard, qui est l’endroit où vous pourrez gérer vos applications à l’avenir.

Consultez un exemple d’application si vous préférez explorer une configuration complète.

Configuration des callback URL et des URL de déconnexion.

Auth0 fait appel aux callback URL et aux URL de déconnexion pour rediriger les utilisateurs vers votre application. Auth0 fait appel à la callback URL après avoir authentifié l’utilisateur et l’URL de déconnexion après avoir supprimé le témoin de session. Si vous ne définissez pas les callback URL et les URL de déconnexion, les utilisateurs ne pourront pas se connecter et se déconnecter de l’application, et votre application produira une erreur.

Sur iOS 17.4+ et macOS 14.4+, il est possible d’utiliser des liens universels comme callback URL et URL de déconnexion. Lorsqu’activé, Auth0.swift reviendra à l’utilisation d’un schéma d’URL personnalisé sur les anciennes versions iOS/MacOS.

Cette fonctionnalité nécessite un Xcode 15.3+ et un compte Apple Developer payant.

Ajoutez les URL suivantes aux callback URL et aux URL de déconnexion, en fonction de la plateforme de votre application. Si vous avez un domaine personnalisé, utilisez-le à la place du domaine de votre locataire Auth0.

iOS

https://${account.namespace}/ios/YOUR_BUNDLE_IDENTIFIER/callback,
+

Pour utiliser les services Auth0, vous devez avoir une application configurée dans Auth0 Dashboard. L’application Auth0 est l’endroit où vous allez configurer le fonctionnement de l’authentification pour l’application que vous développez.

Configurer une application Auth0

Utilisez le sélecteur interactif pour créer une nouvelle application Auth0 ou sélectionnez une application Auth0 native existante. Auth0 attribue à chaque application un ID client unique alphanumérique que votre application utilise pour appeler les API Auth0 via la trousse SDK.

Tous les paramètres que vous configurez à l’aide de ce démarrage rapide met automatiquement à jour votre application Auth0 dans le Dashboard, qui est l’endroit où vous pourrez gérer vos applications à l’avenir.

Consultez un exemple d’application si vous préférez explorer une configuration complète.

Configuration des Callback URL et des URL de déconnexion.

Auth0 fait appel aux Callback URL et aux URL de déconnexion pour rediriger les utilisateurs vers votre application. Auth0 fait appel à une URL de rappel après avoir authentifié l’utilisateur et à une URL de déconnexion après avoir supprimé le témoin de session. Si vous ne définissez pas les Callback URL et les URL de déconnexion, les utilisateurs ne pourront pas se connecter et se déconnecter de l’application, et votre application produira une erreur.

Sur iOS 17.4+ et macOS 14.4+, il est possible d’utiliser des liens universels comme callback URL et URL de déconnexion. Lorsqu’activé, Auth0.swift reviendra à l’utilisation d’un schéma d’URL personnalisé sur les anciennes versions iOS/MacOS.

Cette fonctionnalité nécessite un Xcode 15.3+ et un compte Apple Developer payant.

Ajoutez les URL suivantes aux URL de rappel et URL de déconnexion, selon la plateforme de votre app. Si vous avez un domaine personnalisé, utilisez-le à la place du domaine de votre locataire Auth0.

iOS

https://${account.namespace}/ios/YOUR_BUNDLE_IDENTIFIER/callback,
 
 YOUR_BUNDLE_IDENTIFIER://${account.namespace}/ios/YOUR_BUNDLE_IDENTIFIER/callback
 
@@ -38,7 +38,7 @@ com.example.MyApp://example.us.auth0.com/ios/com.example.MyApp/callback
 
 
-

1. Configurer le domaine associé.

Cette étape nécessite un compte Apple Developer payant. Il est nécessaire d’utiliser des liens universels comme callback URL et URL de déconnexion. Ignorez cette étape pour utiliser plutôt un schéma d’URL personnalisé.

Configurer l’ID Team et l’identifiant de l’ensemble

Allez à la page des paramètres de votre application Auth0, faites défiler jusqu’en bas, et ouvrez Advanced Settings (Paramètres avancés) > Device Settings ( Paramètres de l’appareil). Dans la section iOS , définissez Team ID sur votre Apple Team ID et App ID sur l’identifiant de l’ensemble de votre application.

Auth0 Dashboard> Applications > Applications > [Native App] > Settings tab (Onglet des paramètres) > Advanced Settings (Paramètres avancés) > Device Settings tab (Onglet des paramètres de l’appareil)

Cette action ajoutera votre application au fichier apple-app-site-association de votre locataire Auth0.

Ajoutez la capacité de domaine associé.

Dans Xcode, allez à l’onglet Signing and Capabilities (Signature et capacités) des paramètres cibles de votre application, puis appuyez sur le bouton + Capability (capacité) Puis sélectionnez Domaines associés.

Xcode> Onglet Signing and Capabilities (Signature et capacités) > Add New (Ajouter nouveau) > Associated Domains (Domaines associés)

Ensuite, ajoutez l’entrée suivante sous Domaines associé :

webcredentials:labs-fundtraining.us.auth0.com
+

Configurer le domaine associé

Cette étape nécessite un compte Apple Developer payant. Il est nécessaire d’utiliser des liens universels comme callback URL et URL de déconnexion. Ignorez cette étape pour utiliser plutôt un schéma d’URL personnalisé.

Configurer l’ID Team et l’identifiant de l’ensemble

Allez à la page des paramètres de votre application Auth0, faites défiler jusqu’en bas, et ouvrez Advanced Settings (Paramètres avancés) > (Paramètres de l’appareil). Dans la section iOS, définissez Team ID sur votre Apple Apple Team ID et App ID sur l’identifiant de l’ensemble de votre application.

Auth0 Dashboard> Applications > Applications > [Native App] > Settings tab (Onglet des paramètres) > Advanced Settings (Paramètres avancés) > Device Settings tab (Onglet des paramètres de l’appareil)

Cette action ajoutera votre application au fichier apple-app-site-association de votre locataire Auth0.

Ajouter la capacité de domaine associé

Dans Xcode, allez à l’ongletSigning and Capabilities (Signature et capacités) des paramètres cibles de votre application, puis appuyez sur le bouton + Capability (Capacité). Sélectionnez ensuite Associated Domains (Domaines associés).

Xcode> Onglet Signing and Capabilities (Signature et capacités) > Add New (Ajouter nouveau) > Associated Domains (Domaines associés)

Ajoutez l’entry suivante sous Associated Domains (Domaines associés) :

webcredentials:labs-fundtraining.us.auth0.com
 
 
@@ -51,56 +51,56 @@ com.example.MyApp://example.us.auth0.com/ios/com.example.MyApp/callback
-

Ensuite, sélectionnez la règle de dépendance et appuyez sur Add Package (Ajouter le package).

Pour plus d’informations sur SPM consultez la documentation officielle.

Utilisation de Cocoapods

Ajoutez la ligne suivante à votre Podfile :

pod 'Auth0', '~> 2.0'
+

Ensuite, sélectionnez la règle de dépendance et appuyez sur Add Package (Ajouter le package).

Pour plus d’informations sur SPM consultez la documentation officielle.

Utilisation de Cocoapods

Ajoutez la ligne suivante à votre Podfile :

pod 'Auth0', '~> 2.0'
 
 
-

Ensuite, exécutez pod install.

Pour plus d’informations sur CocoaPods, consultez la documentation officielle.

Utilisation de Carthage

Ajoutez la ligne suivante à votre Cartfile :

github "auth0/Auth0.swift" ~> 2.0
+

Ensuite, exécutez pod install.

Pour plus d’informations sur CocoaPods, consultez la documentation officielle.

Utilisation de Carthage

Ajoutez la ligne suivante à votre Cartfile :

github "auth0/Auth0.swift" ~> 2.0
 
 
-

Ensuite, exécutez carthage bootstrap --use-xcframeworks.

Pour en savoir plus sur Carthage, consultez la documentation officielle.

+

Ensuite, exécutez carthage bootstrap --use-xcframeworks.

Pour en savoir plus sur Carthage, consultez la documentation officielle.

-## Configurer la trousse SDK {{{ data-action="code" data-code="Auth0.plist" }}} +## Configuration de la trousse SDK {{{ data-action="code" data-code="Auth0.plist" }}} -

La trousse SDK Auth0.swift a besoin de votre domaine Auth0 et de votre ID client. Ces valeurs se trouvent dans la page des paramètres de votre application Auth0.

  • domain : Le domaine de votre locataire Auth0. Si vous avez un domaine personnalisé, utilisez-le à la place du domaine de votre locataire Auth0.

  • ID client : L’ID alphanumérique unique de l’application Auth0 que vous avez configuré précédemment dans ce démarrage rapide.

Créez un fichier plist nommé Auth0.plist dans votre ensemble d’application contenant les valeurs du domaine Auth0 et de l’ID client.

Vous pouvez également configurer la trousse SDK de manière programmatique. Consultez README pour en savoir plus.

Démarrage rapide iOS Swift – Étape 3 – Point de contrôle

Vous avez configuré la trousse SDK Auth0.swift. Exécutez votre application afin de vérifier qu’elle ne produit pas d’erreurs liées à la trousse SDK.

+

La trousse SDK Auth0.swift a besoin de votre domain (domaine) Auth0 et de votre Client ID (Identifiant client). Ces valeurs se trouvent dans la page des paramètres de votre application Auth0.

  • domain (domaine) : Le domaine de votre locataire Auth0. Si vous avez un domaine personnalisé, utilisez-le à la place du domaine de votre locataire Auth0.

  • Client ID (Identifiant client) L’identifiant alphanumérique unique de l’application Auth0 que vous avez configuré précédemment dans ce démarrage rapide.

Créez un fichier plist nommé Auth0.plist dans votre ensemble d’application contenant les valeurs du domaine Auth0 et de l’identifiant client.

Vous pouvez également configurer la trousse SDK de manière programmatique. Consultez README pour en savoir plus.

Démarrage rapide iOS Swift - Étape 3 - Point de contrôle

Vous avez configuré la trousse SDK Auth0.swift. Exécutez votre application afin de vérifier qu’elle ne produit pas d’erreurs liées à la trousse SDK.

-

If your app produces errors related to the SDK:

  • Make sure you selected the correct Auth0 application

  • Verify you saved your URL updates

  • Ensure you set the Auth0 domain and Client ID correctly

Still having issues? Check out our documentation or visit our community page to get more help.

+

Si votre application génère des erreurs liées à la trousse SDK :

  • Assurez-vous d’avoir sélectionné la bonne application Auth0

  • Vérifiez que vous avez enregistré vos mises à jour d’URL

  • Assurez-vous d’avoir défini correctement le domaine Auth0 et l’identifiant client

Vous rencontrez toujours des problèmes? Consultez notre documentation ou la page de notre communauté pour obtenir de l’aide.

## Ajouter une fonctionnalité de connexion à votre application {{{ data-action="code" data-code="MainView.swift#20:31" }}} -

Importez le module Auth0 dans le fichier où vous souhaitez afficher la page de connexion. Ensuite, affichez la page Connexion universelle dans l’action de votre bouton Login (connexion).

Vous pouvez utiliser async/await ou Combine au lieu de l’API basée sur les rappels. Consultez README pour apprendre davantage.

Un exemple d’écran de connexion universelle pour une application iOS.

Démarrage rapide iOS Swift – Étape 4 – Point de contrôle

Appuyez sur le bouton Login (Connexion) et vérifiez que :

  • Une boîte d’alerte s’affiche demandant le consentement.

  • Choisir Continue (Continuer) ouvre la page de connexion universelle dans un modal Safari.

  • Vous pouvez vous connecter ou vous inscrire en utilisant un nom d’utilisateur et un mot de passe ou un fournisseur social.

  • Le modal Safari se ferme automatiquement par la suite.

+

Importez le module Auth0 dans le fichier où vous souhaitez présenter la page de connexion. Ensuite, présentez la page Universal Login (Connexion universelle) dans l’action de votre bouton Login (Connexion).

Vous pouvez utiliser async/await ou Combine au lieu de l’API basée sur les rappels. Consultez README pour en savoir plus.

Un exemple d’écran de connexion universelle pour une application iOS.

Démarrage rapide iOS Swift – Étape 4 – Point de contrôle

Appuyez sur le bouton Login (Connexion) et vérifiez que :

  • Une boîte d’alerte s’affiche demandant le consentement.

  • Sélectionner Continue (Continuer) ouvre la page de connexion universelle dans un modal Safari.

  • Vous pouvez vous connecter ou vous inscrire en utilisant un nom d’utilisateur et un mot de passe ou un fournisseur social.

  • Le modal Safari se ferme automatiquement par la suite.

-

If login fails or produces errors:

  • Verify you entered the correct callback URL

  • Ensure you set the Auth0 domain and Client ID correctly

Still having issues? Check out our documentation or visit our community page to get more help.

+

Si la connexion échoue ou génère des erreurs :

  • Vérifiez que vous avez saisi la bonne URL de rappel

  • Assurez-vous de définir correctement le domaine Auth0 et l’identifiant client

Vous rencontrez toujours des problèmes? Consultez notre documentation ou la page de notre communauté pour obtenir de l’aide.

## Ajouter une fonctionnalité de déconnexion à votre application {{{ data-action="code" data-code="MainView.swift#34:45" }}} -

Maintenant que vous pouvez vous connecter à votre application, vous avez besoin d’un moyen de vous log out (déconnecter). Dans l’action de votre bouton Logout (Déconnexion) , faites usage de la méthode clearSession() pour effacer le témoin de session de la connexion universelle.

Démarrage rapide iOS Swift – Étape 5 – Point de contrôle

Appuyez sur le bouton Logout (Connexion) et vérifiez que :

  • Une boîte d’alerte s’affiche demandant le consentement.

  • Choisir Continue (Continuer) ouvre une page dans un modal Safari.

  • Le modal Safari se ferme automatiquement par la suite.

+

Maintenant que vous pouvez vous connecter à votre application, vous avez besoin d’un moyen de vous déconnecter. Dans l’action de votre bouton Logout (Déconnexion), faites usage de la méthode clearSession() pour effacer le témoin de session de la connexion universelle.

Démarrage rapide iOS Swift - Étape 5 - Point de contrôle

Appuyez sur le bouton Logout (Déconnexion) et vérifiez que :

  • Une boîte d’alerte s’affiche demandant le consentement.

  • Choisir Continue (Poursuivre) ouvre une page dans une boîte de dialogue modale Safari.

  • La boîte de dialogue modale Safari se ferme automatiquement par la suite.

-

If logout fails or produces errors:

  • Verify you entered the correct callback URL

  • Ensure you set the Auth0 domain and Client ID correctly

Still having issues? Check out our documentation or visit our community page to get more help.

+

Si la déconnexion échoue ou génère des erreurs :

  • Vérifiez que vous avez saisi la bonne URL de rappel

  • Assurez-vous de définir correctement le domaine Auth0 et l’identifiant client

Vous rencontrez toujours des problèmes? Consultez notre documentation ou la page de notre communauté pour obtenir de l’aide.

## Accéder aux informations du profil utilisateur {{{ data-action="code" data-code="User.swift#11:14" }}} -

L’instance Credentials que vous avez obtenue après vous être connecté inclut un ID token (jeton d’ID). Le jeton d’ID contient les informations de profil associées à l’utilisateur connecté, telles que son courriel et sa photo de profil. Vous pouvez utiliser ces informations pour personnaliser l’interface utilisateur de votre application.

La trousse SDK Auth0.swift inclut un utilitaire pour décoder les JWT comme le jeton d’ID. Commencez par importer le module JWTDecode dans le fichier où vous souhaitez accéder aux informations du profil utilisateur. Ensuite, utilisez la méthode decode(jwt:) pour décoder le jeton d’ID et accéder aux demandes qu’il contient.

Vous pouvez récupérer les dernières informations utilisateur avec la méthode userInfo(withAccessToken:). Consultez les EXAMPLES (EXEMPLES) pour en savoir plus.

Démarrage rapide iOS Swift – Étape 6 – Point de contrôle

Vérifiez que vous pouvez accéder à email, picture, ou à toute autre demande après vous être connecté.

+

L’instance Credentials que vous avez obtenue après vous être connecté inclut un jeton d’ID. Le jeton d’ID contient les informations de profil associées à l’utilisateur connecté, telles que son courriel et sa photo de profil. Vous pouvez utiliser ces informations pour personnaliser l’interface utilisateur de votre application.

La trousse SDK Auth0.swift inclut un utilitaire pour décoder les JWT, comme le jeton d’ID. Commencez par importer le module JWTDecode dans le fichier où vous souhaitez accéder aux informations du profil utilisateur. Ensuite, utilisez la méthode decode(jwt:) pour décoder le jeton d’ID et accéder aux demandes qu’il contient.

Vous pouvez récupérer les dernières informations utilisateur avec la méthode userInfo(withAccessToken:). Consultez les EXAMPLES (EXEMPLES) pour en savoir plus.

Démarrage rapide iOS Swift - Étape 6 - Point de contrôle

Vérifiez que vous pouvez accéder à email, picture, ou à toute autre demande après vous être connecté.

-

If you cannot access the user information:

  • Verify you imported the JWTDecode module where you invoke the decode(jwt:) method

  • Make sure you spelled your claims correctly

Still having issues? Check out our documentation or visit our community forums to get more help.

+

Si vous ne pouvez pas accéder aux informations de l’utilisateur :

  • Vérifiez que vous avez importé le module JWTDecode dans lequel vous appelez la méthode decode(jwt:)

  • Vérifiez l’orthographe de vos requêtes.

Vous rencontrez toujours des problèmes? Consultez notre documentation ou visitez nos forums communautaires pour obtenir de l’aide.

diff --git a/fr-ca/articles/quickstart/native/maui/interactive.md b/fr-ca/articles/quickstart/native/maui/interactive.md index ec399f8b3d..4e568a4bc0 100644 --- a/fr-ca/articles/quickstart/native/maui/interactive.md +++ b/fr-ca/articles/quickstart/native/maui/interactive.md @@ -5,24 +5,24 @@ interactive: true files: - files/MainPage.xaml github: - path: https://github.com/auth0-samples/auth0-maui-samples/tree/master/Sample + path: Sample locale: fr-CA --- # Ajouter une connexion à votre application MAUI -

Auth0 vous permet d’ajouter rapidement l’authentification à presque tous les types d’application. Ce guide explique comment intégrer Auth0, ajouter l’authentification et afficher les informations de profil utilisateur dans n’importe quelle application .NET MAUI à l’aide des SDK Auth0 de MAUI.

La trousse SDK MAUI prend en charge Android, iOS, macOS et Windows. Poursuivez la lecture pour en savoir plus sur la configuration propre à chaque plateforme.

+

Auth0 vous permet d’ajouter rapidement l’authentification à presque tous les types d’application. Ce guide explique comment intégrer Auth0, ajouter l’authentification et afficher les informations de profil utilisateur dans n’importe quelle application .NET MAUI à l’aide des SDK Auth0 de MAUI.

La trousse SDK MAUI prend en charge Android, iOS, macOS et Windows. Poursuivez la lecture pour en savoir plus sur la configuration propre à chaque plateforme.

-## Configurer Auth0 +## Configuration d’Auth0 -

Pour utiliser les services Auth0, vous devez avoir une application installée dans Auth0 Dashboard. L’application Auth0 est l’endroit où vous allez configurer le fonctionnement de l’authentification pour le projet que vous développez.

Configurer une application

Utilisez le sélecteur interactif pour créer une nouvelle application Auth0 ou sélectionner une application existante qui représente le projet avec lequel vous souhaitez effectuer l’intégration. Dans Auth0, il est attribué à chaque application un identifiant client unique alphanumérique que votre code d’application utilisera pour appeler les API Auth0 via la trousse SDK.

Tous les paramètres que vous configurez à l’aide de ce guide rapide seront automatiquement mis à jour pour votre application dans le Dashboard, qui est l’endroit où vous pourrez gérer vos applications à l’avenir.

Si vous préférez explorer une configuration complète, vous pouvez plutôt consulter une application faisant office d’exemple.

Configuration des callback URL

Une callback URL est une URL intégrée dans votre application vers laquelle vous souhaitez qu’Auth0 redirige les utilisateurs après leur authentification. Si elle n’est pas définie, les utilisateurs ne seront pas redirigés vers votre application après s’être connectés.

Si vous suivez notre exemple, définissez cette URL comme suit : myapp://callback.

Configurer les URL de déconnexion

Une URL de déconnexion est une URL intégrée dans votre application vers laquelle vous souhaitez qu’Auth0 redirige les utilisateurs après qu’ils se sont déconnectés. Si elle n’est pas définie, les utilisateurs ne pourront pas se déconnecter de votre application et recevront un message d’erreur.

Si vous suivez notre exemple, définissez cette URL comme suit : myapp://callback.

+

Pour utiliser les services Auth0, vous devez avoir une application installée dans Auth0 Dashboard. L’application Auth0 est l’endroit où vous allez configurer le fonctionnement de l’authentification pour le projet que vous développez.

Configurer une application

Utilisez le sélecteur interactif pour créer une nouvelle application Auth0 ou sélectionner une application existante qui représente le projet avec lequel vous souhaitez effectuer l’intégration. Dans Auth0, chaque application se voit attribuer un identifiant client unique alphanumérique que votre code d’application utilisera pour appeler les API Auth0 via la trousse SDK.

Tous les paramètres que vous configurez à l’aide de ce guide de démarrage rapide seront automatiquement mis à jour pour votre application dans le Tableau de bord, qui est l’endroit où vous pourrez gérer vos applications à l’avenir.

Si vous préférez explorer une configuration complète, consultez plutôt un exemple d’application.

Configuration des URL de rappel

Une URL de rappel est une URL intégrée dans votre application vers laquelle vous souhaitez qu’Auth0 redirige les utilisateurs après leur authentification. Si elle n’est pas définie, les utilisateurs ne seront pas redirigés vers votre application après s’être connectés.

Si vous suivez notre exemple, définissez cette URL comme suit : myapp://callback.

Configuration des URL de déconnexion

Une URL de déconnexion est une URL intégrée dans votre application vers laquelle vous souhaitez qu’Auth0 redirige les utilisateurs après leur déconnexion. Si elle n’est pas définie, les utilisateurs ne pourront pas se déconnecter de votre application et recevront un message d’erreur.

Si vous suivez notre exemple, définissez cette URL comme suit : myapp://callback.

## Installer la trousse SDK Auth0 -

Auth0 propose une trousse SDK MAUI pour simplifier le processus d’implémentation de l’authentification Auth0 dans les applications MAUI.

Utilisez le Gestionnaire de packages NuGet (Tools [Outils] -> Library Package Manager [Gestionnaire de packages de bibliothèque] -> Package Manager Console [Console du gestionnaire de package]) pour installer le package Auth0.OidcClient.MAUI.

Sinon, vous pouvez utiliser la Console du gestionnaire de packages NuGet (Install-Package) ou le dotnet CLI (dotnet add).

Install-Package Auth0.OidcClient.MAUI
+

Auth0 propose une trousse SDK MAUI pour simplifier le processus de mise en œuvre de l’authentification Auth0 dans les applications MAUI.

Utilisez le gestionnaire de paquet NuGet (Outils -> Gestionnaire de paquets de la bibliothèque -> Console du gestionnaire de paquets) pour installer le paquet Auth0.OidcClient.MAUI.

Vous pouvez aussi utiliser la Console du gestionnaire de paquets NuGet (Install-Package) ou le dotnet interface de ligne de commande (CLI) (dotnet add).

Install-Package Auth0.OidcClient.MAUI
 
 
@@ -32,22 +32,22 @@ locale: fr-CA

-## Configuration particulière de la plateforme +## Configuration propre à la plateforme -

Une configuration particulière à la plateforme est nécessaire pour utiliser la trousse SDK avec Android et Windows.

Android

Créer une nouvelle activité qui étend WebAuthenticatorCallbackActivity:

[Activity(NoHistory = true, LaunchMode = LaunchMode.SingleTop, Exported = true)]
+

Une configuration propre à la plateforme est nécessaire pour utiliser la trousse SDK avec Android et Windows.

Android

Créez une nouvelle activité qui étend WebAuthenticatorCallbackActivity :

[Activity(NoHistory = true, LaunchMode = LaunchMode.SingleTop, Exported = true)]
 
 [IntentFilter(new[] { Intent.ActionView },
 
-              Categories = new[] { Intent.CategoryDefault, Intent.CategoryBrowsable },
+ Categories = new[] { Intent.CategoryDefault, Intent.CategoryBrowsable },
 
-              DataScheme = CALLBACK_SCHEME)]
+ DataScheme = CALLBACK_SCHEME)]
 
 public class WebAuthenticatorActivity : Microsoft.Maui.Authentication.WebAuthenticatorCallbackActivity
 
 {
 
-    const string CALLBACK_SCHEME = "myapp";
+ const string CALLBACK_SCHEME = "myapp";
 
 }
 
@@ -55,35 +55,35 @@ public class WebAuthenticatorActivity : Microsoft.Maui.Authentication.WebAuthent
 
 

L’activité ci-dessus garantira que l’application peut gérer l’URL myapp://callback lorsque Auth0 redirige de nouveau vers l’application Android après la connexion.

Windows

Pour garantir la réactivation correcte de votre application après la redirection vers Auth0, vous devez faire deux choses :

  • Ajouter le protocole correspondant au Package.appxmanifest. Dans ce cas, il est défini sur myapp, mais vous pouvez le changer à votre guise (veillez également à mettre à jour toutes les URL Auth0 correspondantes).

<Applications>
 
-  <Application Id="App" Executable="$targetnametoken$.exe" EntryPoint="$targetentrypoint$">
+ <Application Id="App" Executable="$targetnametoken$.exe" EntryPoint="$targetentrypoint$">
 
-    <Extensions>
+ <Extensions>
 
-      <uap:Extension Category="windows.protocol">
+ <uap:Extension Category="windows.protocol">
 
-        <uap:Protocol Name="myapp"/>
+ <uap:Protocol Name="myapp"/>
 
-      </uap:Extension>
+ </uap:Extension>
 
-    </Extensions>
+ </Extensions>
 
-  </Application>
+ </Application>
 
 </Applications>
 
 
-

  • Appeler Activator.Default.CheckRedirectionActivation() dans le fichier propre à Windows App.xaml.cs.

public App()
+

  • Appelez Activator.Default.CheckRedirectionActivation() dans le fichier propre à App.xaml.cs.

public App()
 
 {
 
-  if (Auth0.OidcClient.Platforms.Windows.Activator.Default.CheckRedirectionActivation())
+ if (Auth0.OidcClient.Platforms.Windows.Activator.Default.CheckRedirectionActivation())
 
-    return;
+ return;
 
 
 
-  this.InitializeComponent();
+ this.InitializeComponent();
 
 }
 
@@ -94,33 +94,31 @@ public class WebAuthenticatorActivity : Microsoft.Maui.Authentication.WebAuthent
 ## Instancier Auth0Client. {{{ data-action="code" data-code="MainPage.xaml.cs#3:10" }}}
 
 
-

Pour intégrer Auth0 dans votre application, instanciez une instance de la classe Auth0Client en passant une instance de Auth0ClientOptions qui contient votre domaine Auth0, votre ID client et les permissions requises. De plus, vous devez également configurer RedirectUri et PostLogoutRedirectUri pour garantir qu’Auth0 peut rediriger vers l’application en utilisant les URL configurées.

using Auth0.OidcClient;
+

Pour intégrer Auth0 dans votre application, instanciez une instance de la classe Auth0Client en passant une instance de Auth0ClientOptions qui contient votre domaine Auth0, votre identifiant client et les permissions requises. De plus, vous devez également configurer RedirectUri et PostLogoutRedirectUri pour garantir qu’Auth0 peut rediriger vers l’application en utilisant les URL configurées.

using Auth0.OidcClient;
 
 
 
-var client = new Auth0Client(new Auth0ClientOptions
+ var client = new Auth0Client(new Auth0ClientOptions {
 
-{
-
-    Domain = "${account.namespace}",
+ Domain = "${account.namespace}",
 
-    ClientId = "${account.clientId}",
+ ClientId = "${account.clientId}",
 
-    RedirectUri = "myapp://callback",
+ RedirectUri = "myapp://callback",
 
-    PostLogoutRedirectUri = "myapp://callback",
+ PostLogoutRedirectUri = "myapp://callback",
 
-    Scope = "openid profile email"
+ Scope = "openid profile email"
 
-});
+ });
 
 
-

Par défaut, la trousse SDK utilisera les onglets personnalisés Chrome pour Android, ASWebAuthenticationSession pour iOS et macOS, et utilisera le navigateur par défaut de votre système sur Windows.

Démarrage rapide MAUI – Étape 4 – Point de contrôle

Votre Auth0Client devrait maintenant être correctement instancié. Éxecutez votre application pour vérifier que :

  • L’ Auth0Client est correctement instancié dans la MainPage.

  • Votre application ne génère aucune erreur liée à Auth0.

+

En règle générale, la trousse SDK emploiera les onglets personnalisés de Chrome pour Android, ASWebAuthenticationSession pour iOS et macOS, et le navigateur par défaut de votre système sur Windows.

Démarrage rapide MAUI - Étape 4 - Point de contrôle

Votre Auth0Client devrait maintenant être correctement instancié. Exécutez votre application pour vérifier que :

  • l’Auth0Client est correctement instancié dans la MainPage,

  • votre application ne génère aucune erreur liée à Auth0.

-

Sorry about that. Here are a couple things to double-check:

  • make sure the correct application is selected

  • did you save after entering your URLs?

  • make sure the domain and client ID are imported correctly

Still having issues? Check out our documentation or visit our community page to get more help.

+

Nous vous prions de nous excuser pour tout inconvénient causé. Voici quelques éléments à vérifier :

  • assurez-vous que la bonne application est sélectionnée

  • avez-vous procédé à un enregistrement après avoir saisi vos URL?

  • assurez-vous que le domaine et l’identifiant client sont importés correctement

Vous rencontrez toujours des problèmes? Consultez notre documentation ou la page de notre communauté pour obtenir de l’aide.

@@ -131,30 +129,30 @@ var client = new Auth0Client(new Auth0ClientOptions
-

S’il n’y a pas d’erreur, vous pouvez accéder à User, IdentityToken, AccessToken et RefreshToken dans le LoginResult renvoyé par LoginAsync().

Démarrage rapide MAUI – Étape 5 – Point de contrôle

Vous devez désormais pouvoir vous connecter ou vous inscrire en utilisant un nom d’utilisateur et un mot de passe.

Appuyez sur le bouton de connexion et vérifiez que :

  • Votre application vous redirige vers la page de connexion universelle d’Auth0.

  • Vous pouvez vous connecter ou vous inscrire.

  • Auth0 vous redirige vers votre application.

+

S’il n’y a pas d’erreur, vous pouvez accéder à User, IdentityToken, AccessToken et RefreshToken dans le LoginResult renvoyé par LoginAsync().

Démarrage rapide MAUI – Étape 5 – Point de contrôle

Vous devez désormais pouvoir vous connecter ou vous inscrire en utilisant un nom d’utilisateur et un mot de passe.

Appuyez sur le bouton de connexion et vérifiez que :

  • Votre application vous redirige vers la page Connexion universelle Auth0.

  • Vous pouvez vous connecter ou vous inscrire.

  • Auth0 vous redirige vers votre application.

-

Sorry about that. Here's something to double-check:

  • you called LoginAsync as expected

Still having issues? Check out our documentation or visit our community page to get more help.

+

Nous vous prions de nous excuser pour tout inconvénient causé. Voici quelques éléments à vérifier :

  • vous avez appelé LoginAsync comme prévu

Vous rencontrez toujours des problèmes? Consultez notre documentation ou la page de notre communauté pour obtenir de l’aide.

-## Ajouter une fonctionnalité de déconnexion à votre application {{{ data-action="code" data-code="MainPage.xaml.cs#32:32" }}} +## Ajoutez une fonctionnalité de déconnexion à votre application {{{ data-action="code" data-code="MainPage.xaml.cs#32:32" }}}

Les utilisateurs qui se connectent à votre projet auront également besoin d’un moyen de se déconnecter. Créez un bouton de déconnexion en utilisant la méthode LogoutAsync() de la trousse SDK. Lorsque les utilisateurs se déconnectent, ils seront redirigés vers votre point de terminaison de déconnexion Auth0, qui par la suite les redirigera immédiatement vers l’URL de déconnexion que vous avez configurée précédemment dans ce démarrage rapide.

await client.LogoutAsync();
 
 
-

Démarrage rapide MAUI – Étape 6 – Point de contrôle

Executez votre application et cliquez sur le bouton de déconnexion, vérifiez que :

  • Votre application vous redirige vers l’adresse que vous avez précisée comme l’une des URL de déconnexion autorisées dans les paramètres de votre application.

  • Vous n’êtes plus connecté à votre application.

+

Démarrage rapide MAUI – Étape 6 – Point de contrôle

Exécutez votre application et cliquez sur le bouton de déconnexion, vérifiez que :

  • Votre application vous redirige vers l’adresse que vous avez précisée comme l’une des URL de déconnexion autorisées dans les paramètres de votre application.

  • Vous n’êtes plus connecté à votre application.

-

Sorry about that. Here are a couple things to double-check:

  • you configured the correct Logout URL

  • you called LogoutAsync as expected.

Still having issues? Check out our documentation or visit our community page to get more help.

+

Nous vous prions de nous excuser pour tout inconvénient causé. Voici quelques éléments à vérifier :

  • vous avez configuré la bonne URL de déconnexion

  • vous avez appelé LogoutAsync comme prévu

Vous rencontrez toujours des problèmes? Consultez notre documentation ou la page de notre communauté pour obtenir de l’aide.

## Afficher les informations du profil utilisateur {{{ data-action="code" data-code="MainPage.xaml.cs#55:58" }}} -

Maintenant que vos utilisateurs peuvent se connecter et se déconnecter, vous voulez probablement pouvoir récupérer et utiliser les informations de profil associées aux utilisateurs authentifiés. Par exemple, vous voudrez peut-être pouvoir afficher le nom ou la photo de profil d’un utilisateur connecté dans votre projet.

La trousse SDK Auth0 de MAUI fournit des informations sur l’utilisateur par l’intermédiaire de la propriété LoginResult.User .

+

Maintenant que vos utilisateurs peuvent se connecter et se déconnecter, vous voudrez probablement pouvoir récupérer les profile information (informations de profil) associées aux utilisateurs authentifiés. Par exemple, vous voudrez peut-être pouvoir afficher le nom ou la photo de profil d’un utilisateur connecté dans votre projet.

La trousse SDK Auth0 de MAUI fournit des informations sur l’utilisateur par l’intermédiaire de la propriété LoginResult.User.

diff --git a/fr-ca/articles/quickstart/native/net-android-ios/interactive.md b/fr-ca/articles/quickstart/native/net-android-ios/interactive.md index ac458a8482..06b11d8815 100644 --- a/fr-ca/articles/quickstart/native/net-android-ios/interactive.md +++ b/fr-ca/articles/quickstart/native/net-android-ios/interactive.md @@ -7,24 +7,24 @@ files: - files/AppDelegate - files/MyViewController github: - path: https://github.com/auth0-samples/auth0-xamarin-oidc-samples/tree/master/Quickstart/01-Login + path: Quickstart/01-Login locale: fr-CA --- # Ajouter une connexion à votre application .NET Android ou iOS -

Auth0 vous permet d’ajouter rapidement l’authentification à presque tous les types d’application. Ce guide explique comment intégrer Auth0, ajouter l’authentification et afficher les informations de profil utilisateur dans n’importe quelle application .NET Android et iOS à l’aide des SDK Auth0 Android et iOS.

Ce guide de démarrage couvre .NET Android et iOS, les futures générations de Xamarin.Android et de Xamarin.iOS. Si vous utilisez encore Xamarin.Android et Xamarin.iOS, vous pouvez suivre ce guide, car l’intégration est identique et les SDK sont compatibles.

Pour utiliser ce guide rapide, vous devez:

  • Vous inscrire à un compte Auth0 gratuit ou vous connecter à Auth0.

  • Avoir un projet Android ou iOS fonctionnel utilisant .NET 6 (ou une version ultérieure) avec lequel vous souhaitez vous intégrer. Vous pouvez également consulter ou télécharger une application faisant office d’exemple lorsque vous vous connectez.

+

Auth0 vous permet d’ajouter rapidement l’authentification à presque tous les types d’application. Ce guide explique comment intégrer Auth0, ajouter l’authentification et afficher les informations de profil utilisateur dans n’importe quelle application .NET Android et iOS à l’aide des SDK Auth0 pour Android et iOS.

Ce guide de démarrage couvre .NET Android et iOS, les futures générations de Xamarin.Android et de Xamarin.iOS. Si vous utilisez encore Xamarin.Android et Xamarin.iOS, vous pouvez suivre ce guide, car l’intégration est identique et les SDK sont compatibles.

Pour utiliser ce guide rapide, vous devez :

  • Vous inscrire à un compte Auth0 gratuit ou vous connecter à Auth0.

  • Avoir un projet Android ou iOS fonctionnel utilisant .NET 6 (ou une version ultérieure) avec lequel vous souhaitez vous intégrer. Vous pouvez également consulter ou télécharger une application faisant office d’exemple lorsque vous vous connectez.

-## Configuration d'Auth0 +## Configuration d’Auth0 -

Pour utiliser les services Auth0, vous devez avoir une application installée dans Auth0 Dashboard. Vous allez configurer l’authentification pour votre projet dans l'application Auth0.

Configurer une application

Utilisez le sélecteur interactif pour créer une nouvelle application «Application native», ou sélectionnez une application existante qui représente le projet avec lequel vous souhaitez vous intégrer. Dans Auth0, il est attribué à chaque application un identificateur client unique alphanumérique que votre code d’application utilisera pour appeler les API Auth0 via le SDK.

Tous les paramètres que vous configurez à l’aide de ce guide rapide seront automatiquement mis à jour pour votre application dans le Dashboard, où vous pourrez gérer vos applications à l’avenir.

Si vous préférez explorer une configuration complète, consultez plutôt un exemple d'application.

Configuration des Callback URL

Une Callback URL est une URL intégrée dans votre application vers laquelle vous souhaitez qu’Auth0 redirige les utilisateurs après leur authentification. Si elle n’est pas définie, les utilisateurs ne seront pas redirigés vers votre application après s’être connectés.

Si vous suivez notre exemple de projet, définissez l’une des URL suivantes selon votre plateforme :

  • Android : YOUR_PACKAGE_NAME://{yourDomain}/android/YOUR_PACKAGE_NAME/callback

  • iOS : YOUR_BUNDLE_ID://{yourDomain}/ios/YOUR_BUNDLE_ID/callback

Configurer des URL de déconnexion

Une URL de déconnexion est une URL intégrée dans votre application vers laquelle vous souhaitez qu’Auth0 redirige les utilisateurs après leur déconnexion. Si elle n’est pas définie, les utilisateurs ne pourront pas se déconnecter de votre application et recevront un message d’erreur.

Si vous suivez notre exemple de projet, définissez l’une des URL suivantes selon votre plateforme :

  • Android : YOUR_PACKAGE_NAME://{yourDomain}/android/YOUR_PACKAGE_NAME/callback

  • iOS : YOUR_BUNDLE_ID://{yourDomain}/ios/YOUR_BUNDLE_ID/callback

Enfin, assurez-vous que Application Type (Type d’application) de votre application est défini sur Native dans les Application Settings (Paramètres de l’application).

+

Pour utiliser les services Auth0, vous devez avoir une application installée dans Auth0 Dashboard. L’application Auth0 est l’endroit où vous allez configurer le fonctionnement de l’authentification pour votre projet.

Configurer une application

Utilisez le sélecteur interactif pour créer une nouvelle application « Application native », ou sélectionnez une application existante qui représente le projet avec lequel vous souhaitez vous intégrer. Dans Auth0, il est attribué à chaque application un identifiant client unique alphanumérique que votre code d’application utilisera pour appeler les API Auth0 via la trousse SDK.

Tous les paramètres que vous configurez à l’aide de ce démarrage rapide seront automatiquement mis à jour pour votre application dans le Dashboard, qui est l’endroit où vous pourrez gérer vos applications à l’avenir.

Si vous préférez explorer une configuration complète, consultez plutôt un exemple d’application.

Configuration des URL de rappel

Une URL de rappel est une URL intégrée dans votre application vers laquelle vous souhaitez qu’Auth0 redirige les utilisateurs après leur authentification. Si elle n’est pas définie, les utilisateurs ne seront pas redirigés vers votre application après s’être connectés.

Si vous suivez notre exemple de projet, définissez l’une des URL suivantes selon votre plateforme :

  • Android : YOUR_PACKAGE_NAME://{yourDomain}/android/YOUR_PACKAGE_NAME/callback

  • iOS : YOUR_BUNDLE_ID://{yourDomain}/ios/YOUR_BUNDLE_ID/callback

Configuration des URL de déconnexion

Une URL de déconnexion est une URL intégrée dans votre application vers laquelle vous souhaitez qu’Auth0 redirige les utilisateurs après leur déconnexion. Si elle n’est pas définie, les utilisateurs ne pourront pas se déconnecter de votre application et recevront un message d’erreur.

Si vous suivez notre exemple de projet, définissez l’une des URL suivantes selon votre plateforme :

  • Android : YOUR_PACKAGE_NAME://{yourDomain}/android/YOUR_PACKAGE_NAME/callback

  • iOS : YOUR_BUNDLE_ID://{yourDomain}/ios/YOUR_BUNDLE_ID/callback

Enfin, assurez-vous que le type d’application pour votre application est défini sur Native dans les Application Settings (Paramètres d’application).

-## Installer le SDK Auth0 +## Installer la trousse SDK Auth0 -

Auth0 propose une trousse SDK Android et iOS pour simplifier le processus d’implémentation de l’authentification Auth0 dans les applications .NET Android et iOS.

Utilisez le gestionnaire de packages NuGet (Tools (Outils) -> Library Package Manager (Gestionnaire de packages de bibliothèque) -> Package Manager Console (Console du gestionnaire de packages)) pour installer le Auth0.OidcClient.AndroidX ou Auth0.OidcClient.iOS , pour développer une application Android ou iOS.

Sinon, vous pouvez utiliser la Package Manager Console (Console du gestionnaire de packages) NuGet (Install-Package) ou l'interface de ligne de commande dotnet (dotnet add).

Install-Package Auth0.OidcClient.AndroidX
+

Auth0 propose une trousse SDK Android et iOS pour simplifier le processus d’implémentation de l’authentification Auth0 dans les applications .NET Android et iOS.

Utilisez le gestionnaire de packages NuGet (Tools (Outils) -> Library Package Manager (Gestionnaire de packages de bibliothèque) -> Package Manager Console (Console du gestionnaire de packages)) pour installer le package Auth0.OidcClient.AndroidX ou Auth0.OidcClient.iOS, pour développer une application Android ou iOS.

Sinon, vous pouvez utiliser la Console du gestionnaire de packages NuGet (Install-Package) ou le dotnet CLI (dotnet add).

Install-Package Auth0.OidcClient.AndroidX
 
 Install-Package Auth0.OidcClient.iOS
 
@@ -55,18 +55,18 @@ var client = new Auth0Client(new Auth0ClientOptions {
 
 
-

Par défaut, la trousse SDK utilisera les onglets personnalisés Chrome pour Android et ASWebAuthenticationSession pour iOS.

Guixe rapide .NET Android/iOS - Étape 3 - Point de contrôle

Votre Auth0Client devrait maintenant être correctement instancié. Exécutez votre application pour vérifier que :

  • L’Auth0Client est instancié correctement dans Activity (Android) ou UIViewController(iOS).

  • Votre application ne génère aucune erreur liée à Auth0.

+

Par défaut, la trousse SDK utilisera les onglets personnalisés Chrome pour Android et ASWebAuthenticationSession pour iOS.

Démarrage rapide .NET Android/iOS - Étape 3 - Point de contrôle

Votre Auth0Client devrait maintenant être correctement instancié. Exécutez votre application pour vérifier que :

  • l’Auth0Client est instancié correctement dans Activity (Android) ou UIViewController (iOS) ;

  • votre application ne génère aucune erreur liée à Auth0.

-

Sorry about that. Here are a couple things to double-check:

  • make sure the correct application is selected

  • did you save after entering your URLs?

  • make sure the domain and client ID are imported correctly

Still having issues? Check out our documentation or visit our community page to get more help.

+

Nous vous prions de nous excuser pour tout inconvénient causé. Voici quelques éléments à vérifier :

  • assurez-vous que la bonne application est sélectionnée

  • avez-vous procédé à un enregistrement après avoir saisi vos URL?

  • assurez-vous que le domaine et l’identifiant client sont importés correctement

Vous rencontrez toujours des problèmes? Consultez notre documentation ou la page de notre communauté pour obtenir de l’aide.

## Configurer Android {{{ data-action="code" data-code="MainActivity.cs#2:9" }}} -

Une fois un utilisateur authentifié avec succès, il est redirigé vers la Callback URL que vous avez configurée précédemment dans ce guide rapide.

Pour gérer la fonction Callback sur les appareils Android, vous devez enregistrer une intention qui gère cette Callback URL. Une façon simple de le faire est d’enregistrer l’intention sur la même activité à partir de laquelle vous avez appelé la méthode LoginAsync pour instancier le flux d’authentification.

Assurez-vous de remplacer YOUR_ANDROID_PACKAGE_NAME dans l’exemple de code par le nom réel du package de votre application, comme com.mycompany.myapplication, et de vous assurer que tout le texte des champs DataScheme, DataHostet DataPathPrefix est en majuscules. De plus, définissez LaunchMode = LaunchMode.SingleTask pour l’activité; sinon, le système créera une nouvelle instance de l’activité chaque fois que la Callback URL est appelée.

De plus, vous devez gérer l’intention dans l’événement OnNewIntent dans votre classe Activity. Vous devez notifier le client OIDC Auth0 pour terminer le flux d’authentification en appelant la méthode Send du singleton ActivityMediator, en transférant l’URL qui a été envoyée.

protected override void OnNewIntent(Intent intent)
+

Une fois un utilisateur authentifié avec succès, il est redirigé vers l’URL de rappel que vous avez configurée précédemment dans ce guide rapide.

Pour gérer la fonction Callback sur les appareils Android, vous devez enregistrer une intention qui gère cette URL de rappel. Une façon simple de le faire est d’enregistrer l’intention sur la même activité à partir de laquelle vous avez appelé la méthode LoginAsync pour instancier le flux d’authentification.

Assurez-vous de remplacer YOUR_ANDROID_PACKAGE_NAME dans l’exemple de code par le nom réel du package de votre application, comme com.mycompany.myapplication, et de vous assurer que tout le texte des champs DataScheme, DataHostet et DataPathPrefix est en majuscules. De plus, définissez LaunchMode = LaunchMode.SingleTask pour l’activité; sinon, le système créera une nouvelle instance de l’activité chaque fois que l’URL de rappel est appelée.

De plus, vous devez gérer l’intention dans l’événement OnNewIntent dans votre classe Activity. Vous devez notifier le client OIDC Auth0 pour terminer le flux d’authentification en appelant la méthode Send du singleton ActivityMediator, en transmettant l’URL qui a été envoyée.

protected override void OnNewIntent(Intent intent)
 
     {
 
@@ -80,10 +80,10 @@ var client = new Auth0Client(new Auth0ClientOptions {
 
 

-## Configurer iOS {{{ data-action="code" data-code="AppDelegate.cs#6:11" }}} +## Configurer iOS {{{ data-action="code" data-code="AppDelegate.cs#6:11" }}} -

Après qu’un utilisateur s’est authentifié avec succès, il est redirigé vers la Callback URL de rappel que vous avez configurée précédemment dans ce guide rapide.

Pour gérer le callback (rappel) sur les appareils iOS :

  1. Ouvrez le fichier Info.plist de votre application dans Visual Studio, puis accédez à l’onglet Advanced (Avancé) .

  2. Sous URL Types (Types d'URL), cliquez sur le bouton Add URL Type (Ajouter le type d’URL).

  3. Définissez Identifier (Identificateur) sur Auth0, les URL Schemes (Schémas d’URL) identiques à Bundle Identifier (Identificateur du bundle) de votre application et le Role (Rôle) sur None (Aucun).

Voici un exemple de la représentation XML de votre fichier Info.plist après avoir ajouté le type d’URL :

<key>CFBundleURLTypes</key>
+

Une fois un utilisateur authentifié avec succès, il est redirigé vers l’URL de rappel que vous avez configurée précédemment dans ce guide rapide.

Pour gérer la callback sur les appareils iOS :

  1. Ouvrez le fichier Info.plist de votre application dans Visual Studio, puis accédez à l’onglet Advanced (Avancé).

  2. Sous URL Types (Types d’URL), cliquez sur le bouton Add URL Type (Ajouter le type d’URL).

  3. Définissez Identifier (Identificateur) sur Auth0, les URL Schemes (Schémas d’URL) identiques à Bundle IdentifierRole (Rôle)

Voici un exemple de la représentation XML de votre fichier Info.plist après avoir ajouté le type d’URL :

<key>CFBundleURLTypes</key>
 
 <array>
 
@@ -111,35 +111,35 @@ var client = new Auth0Client(new Auth0ClientOptions {
 
 
-

De plus, vous devez gérer la Callback URL dans l’événement OpenUrl dans votre classe AppDelegate. Vous devez notifier le client OIDC Auth0 pour terminer le flux d’authentification en appelant la méthode Send du singleton ActivityMediator, en transmettant l’URL qui a été envoyée.

+

De plus, vous devez gérer l’URL de rappel dans l’événement OpenUrl dans votre classe AppDelegate. Vous devez notifier le client OIDC Auth0 pour terminer le flux d’authentification en appelant la méthode Send du singleton ActivityMediator, en transmettant l’URL qui a été envoyée.

## Ajouter une fonctionnalité de connexion à votre application -

À présent que vous avez configuré votre application Auth0 et la trousse SDK Auth0, vous devez configurer la connexion pour votre projet. Pour ce faire, vous utiliserez la méthode LoginAsync() de la trousse SDK pour créer un bouton de connexion qui redirige les utilisateurs vers la page de connexion universelle Auth0.

var loginResult = await client.LoginAsync();
+

À présent que vous avez configuré votre application Auth0 et la trousse SDK Auth0, vous devez configurer la connexion pour votre projet. Pour ce faire, vous utiliserez la méthode LoginAsync() de la trousse SDK pour créer un bouton de connexion qui redirige les utilisateurs vers la page de connexion universelle Auth0.

var loginResult = await client.LoginAsync();
 
 
-

S’il n’y a pas d’erreur, vous pourrez accéder à User, IdentityToken, AccessToken et RefreshToken dans le LoginResult renvoyé par LoginAsync().

Guide rapide .NET Android/iOS - Étape 6 - Point de contrôle

Vous devez désormais pouvoir vous connecter ou vous inscrire en utilisant un nom d’utilisateur et un mot de passe.

Appuyez sur le bouton de connexion et vérifiez que :

  • Votre application Android ou iOS vous redirige vers la page de connexion universelle d’Auth0.

  • Vous pouvez vous connecter ou vous inscrire.

  • Auth0 vous redirige vers votre application.

+

S’il n’y a pas d’erreur, vous pouvez accéder à User, IdentityToken, AccessToken et RefreshToken dans le LoginResult renvoyé par LoginAsync().

Démarrage rapide .NET Android/iOS – Étape 6 – Point de contrôle

Vous devez désormais pouvoir vous connecter ou vous inscrire en utilisant un nom d’utilisateur et un mot de passe.

Appuyez sur le bouton de connexion et vérifiez que :

  • Votre application Android ou iOS vous redirige vers la page de connexion universelle Auth0.

  • Vous pouvez vous connecter ou vous inscrire.

  • Auth0 vous redirige vers votre application.

-

Sorry about that. Here's something to double-check:

  • you called LoginAsync as expected

Still having issues? Check out our documentation or visit our community page to get more help.

+

Nous vous prions de nous excuser pour tout inconvénient causé. Voici quelques éléments à vérifier :

  • vous avez appelé LoginAsync comme prévu

Vous rencontrez toujours des problèmes? Consultez notre documentation ou la page de notre communauté pour obtenir de l’aide.

## Ajouter une fonctionnalité de déconnexion à votre application -

Les utilisateurs qui se connectent à votre projet auront également besoin d’un moyen de se déconnecter. Créez un bouton de déconnexion en utilisant la méthode LogoutAsync() de la trousse SDK. Lorsque les utilisateurs se déconnecteront, ils seront redirigés vers votre point de terminaison de déconnexion Auth0, qui par la suite les redirigera immédiatement vers l’URL de déconnexion que vous avez configurée précédemment dans ce guide rapide.

await client.LogoutAsync();
+

Les utilisateurs qui se connectent à votre projet auront également besoin d’un moyen de se déconnecter. Créez un bouton de déconnexion en utilisant la méthode LogoutAsync() de la trousse SDK. Lorsque les utilisateurs se déconnectent, ils seront redirigés vers votre point de terminaison de déconnexion Auth0, qui par la suite les redirigera immédiatement vers l’URL de déconnexion que vous avez configurée précédemment dans ce démarrage rapide.

await client.LogoutAsync();
 
 
-

Guide rapide .NET Android/iOS - Étape 7 - Point de contrôle

Exécutez votre application et cliquez sur le bouton de déconnexion. Vérifiez que :

  • Votre application Android ou iOS vous redirige vers l’adresse que vous avez spécifiée comme l’une des URL de déconnexion autorisées dans les paramètres de votre application.

  • Vous n’êtes plus connecté à votre application.

+

Guide rapide .NET Android/iOS - Étape 7 - Point de contrôle

Exécutez votre application et cliquez sur le bouton de déconnexion. Veuillez vérifiez que :

  • Votre application Android ou iOS vous redirige vers l’adresse que vous avez spécifiée comme l’une des URL de déconnexion autorisées dans les paramètres de votre application.

  • Vous n’êtes plus connecté à votre application.

-

Sorry about that. Here are a couple things to double-check:

  • you configured the correct Logout URL

  • you called LogoutAsync as expected.

Still having issues? Check out our documentation or visit our community page to get more help.

+

Nous vous prions de nous excuser pour tout inconvénient causé. Voici quelques éléments à vérifier :

  • vous avez configuré la bonne URL de déconnexion

  • vous avez appelé LogoutAsync comme prévu

Vous rencontrez toujours des problèmes? Consultez notre documentation ou la page de notre communauté pour obtenir de l’aide.

diff --git a/fr-ca/articles/quickstart/native/react-native-expo/files/app.md b/fr-ca/articles/quickstart/native/react-native-expo/files/app.md index 881d165b50..2812a72d51 100644 --- a/fr-ca/articles/quickstart/native/react-native-expo/files/app.md +++ b/fr-ca/articles/quickstart/native/react-native-expo/files/app.md @@ -1,41 +1,49 @@ --- -name: App.js -language: javascript +name: app.json +language: json --- -```javascript -import {useAuth0, Auth0Provider} from 'react-native-auth0'; - -const Home = () => { - const {authorize, clearSession, user, error, isLoading} = useAuth0(); - - const onLogin = async () => { - try { - await authorize(); - } catch (e) { - console.log(e); +```json +{ + "expo": { + "name": "00-Login-Expo", + "slug": "00-Login-Expo", + "version": "1.0.0", + "orientation": "portrait", + "icon": "./assets/icon.png", + "userInterfaceStyle": "light", + "plugins": [ + [ + "react-native-auth0", + { + "domain": "${account.namespace}", + } + ] + ], + "splash": { + "image": "./assets/splash.png", + "resizeMode": "contain", + "backgroundColor": "#ffffff" + }, + "updates": { + "fallbackToCacheTimeout": 0 + }, + "assetBundlePatterns": [ + "**/*" + ], + "web": { + "favicon": "./assets/favicon.png" + }, + "android": { + "package": "com.auth0samples" + }, + "ios": { + "bundleIdentifier": "com.auth0samples" } - }; - - const onLogout = async () => { - try { - await clearSession(); - } catch (e) { - console.log('Log out cancelled'); - } - }; - - if (isLoading) { - return Loading; } - - const loggedIn = user !== undefined && user !== null; - - return ( - - {loggedIn && You are logged in as {user.name}} - {!loggedIn && You are not logged in} - {error && {error.message}} +} +``` +r && {error.message}}
+

Configurez votre application Java EE

L’exemple qui accompagne ce tutoriel est écrit en JSP et testé avec le serveur d’application WildFly. Il se peut que vous deviez adapter certaines des étapes si vous travaillez avec un conteneur d’application ou des technologies différents.

Votre application Java EE a besoin de certaines informations pour authentifier les utilisateurs avec votre application Auth0. Le fichier descripteur de déploiement web.xml peut être utilisé pour stocker ces informations, bien que vous puissiez les stocker dans un autre emplacement sécurisé.

Ces informations seront utilisées pour configurer la bibliothèque auth0-java-mvc-commons afin de permettre aux utilisateurs de se connecter à votre application. Pour en savoir plus sur la bibliothèque, y compris ses différentes options de configuration, consultez le fichier README de la bibliothèque.

@@ -101,7 +101,7 @@ implementation 'com.auth0:mvc-auth-commons:1. ' ## Configurer la sécurité Java EE {{{ data-action="code" data-code="src/main/java/com/auth0/example/security/Auth0AuthenticationConfig.java" }}} -

L’API de Java EE 8 Security a introduit l’interface HttpAuthenticationMechanism pour permettre aux applications d’obtenir les identifiants d’un utilisateur. Des implémentations par défaut existent pour l’authentification de base et l’authentification basée sur le formulaire, et il est facile de configurer une stratégie d’authentification personnalisée.

Pour s’authentifier avec Auth0, il faut fournir des implémentations personnalisées des interfaces suivantes :

  • HttpAuthenticationMechanism : responsable de la gestion du flux d’authentification pour les utilisateurs qui reviennent d’Auth0. (JavaDoc).

  • IdentityStore : responsable de la validation des identifiants de l’utilisateur (JavaDoc).

  • CallerPrincipal : représente le principal de l’appelant de la requête HTTP en cours (JavaDoc).

  • Credential : représente l’identifiant que l’appelant utilisera pour s’authentifier (JavaDoc).

Tout d’abord, mettez vos paramètres Auth0 à la disposition de l’application en créant un bean @ApplicationScoped pour récupérer les valeurs du contexte Web et les rendre disponibles via des getters (accesseurs).

Ensuite, créez un CallerPrincipal personnalisé qui représente l’appelant de la requête en cours :

// src/main/java/com/auth0/example/security/Auth0JwtPrincipal.java
+

L’API de Java EE 8 Security a introduit l’interface HttpAuthenticationMechanism pour permettre aux applications d’obtenir les identifiants d’un utilisateur. Des implémentations par défaut existent pour l’authentification de base et l’authentification basée sur le formulaire, et il est facile de configurer une stratégie d’authentification personnalisée.

Pour s’authentifier avec Auth0, il faut fournir des implémentations personnalisées des interfaces suivantes :

  • HttpAuthenticationMechanism : responsable de la gestion du flux d’authentification pour les utilisateurs qui reviennent d’Auth0. (JavaDoc).

  • IdentityStore : responsable de la validation des identifiants de l’utilisateur (JavaDoc).

  • CallerPrincipal : représente le principal de l’appelant de la requête HTTP en cours (JavaDoc).

  • Credential : représente l’identifiant que l’appelant utilisera pour s’authentifier (JavaDoc).

Tout d’abord, mettez vos paramètres Auth0 à la disposition de l’application en créant un bean @ApplicationScoped pour récupérer les valeurs du contexte Web et les rendre disponibles via des getters (accesseurs).

Ensuite, créez un CallerPrincipal personnalisé qui représente l’appelant de la requête en cours :

// src/main/java/com/auth0/example/security/Auth0JwtPrincipal.java
 
 
 
@@ -161,7 +161,7 @@ class Auth0JwtCredential implements Credential {
 
 
-

Vous avez maintenant défini les classes qui représentent le principal et l’identifiant d’un appelant. Ensuite, créez une implémentation personnalisée de IdentityStore. Cette classe sera chargée de valider les identifiants de l’utilisateur :

// src/main/java/com/auth0/example/security/Auth0JwtIdentityStore.java
+

Vous avez maintenant défini les classes qui représentent le principal et l’identifiant d’un appelant. Ensuite, créez une implémentation personnalisée de IdentityStore. Cette classe sera chargée de valider les identifiants de l’utilisateur :

// src/main/java/com/auth0/example/security/Auth0JwtIdentityStore.java
 
 
 
@@ -193,7 +193,7 @@ public class Auth0JwtIdentityStore implements IdentityStore {
 
 
-

Si le credential est un Auth0Credential, l’utilisateur appelant est authentifié et valide, et un CredentialValidationResult créé avec le credential est renvoyé pour indiquer le succès. S’il ne s’agit pas d’un Auth0Credential, un CredentialValidationResult.NOT_VALIDATED_RESULT est renvoyé.

Avant d’implémenter l’interface HttpAuthenticationMechanism qui utilisera tous ces collaborateurs, créez un bean qui fournira une instance configurée du AuthenticationController de la trousse SDK Auth0 Java MVC. Le AuthenticationController est utilisé pour construire l’URL d’autorisation où les utilisateurs se connecteront, et gérer l’échange de jetons pour authentifier les utilisateurs.

  • Si votre application Auth0 est configurée pour utiliser l’algorithme de signature RS256 (par défaut lors de la création d’une nouvelle application Auth0), vous devez configurer un JwkProvider pour récupérer la clé publique utilisée pour vérifier la signature du jeton. Voir le référentiel jwks-rsa-java pour connaître les options de configuration supplémentaires.

  • Si votre application Auth0 est configurée pour utiliser l’algorithme de signature HS256, il n’est pas nécessaire de configurer le JwkProvider.

Pour en savoir plus sur les algorithmes de signature disponibles, consultez la documentation.

L’exemple ci-dessous montre comment configurer le AuthenticationController pour l’utiliser avec l’algorithme de signature RS256 :

// src/main/java/com/auth0/example/security/Auth0AuthenticationProvider.java
+

Si le credential est un Auth0Credential, l’utilisateur appelant est authentifié et valide, et un CredentialValidationResult créé avec le credential est renvoyé pour indiquer le succès. S’il ne s’agit pas d’un Auth0Credential, un CredentialValidationResult.NOT_VALIDATED_RESULT est renvoyé.

Avant d’implémenter l’interface HttpAuthenticationMechanism qui utilisera tous ces collaborateurs, créez un bean qui fournira une instance configurée du AuthenticationController de la trousse SDK Auth0 Java MVC. Le AuthenticationController est utilisé pour construire l’URL d’autorisation où les utilisateurs se connecteront, et gérer l’échange de jetons pour authentifier les utilisateurs.

  • Si votre application Auth0 est configurée pour utiliser l’algorithme de signature RS256 (par défaut lors de la création d’une nouvelle application Auth0), vous devez configurer un JwkProvider pour récupérer la clé publique utilisée pour vérifier la signature du jeton. Voir le référentiel jwks-rsa-java pour connaître les options de configuration supplémentaires.

  • Si votre application Auth0 est configurée pour utiliser l’algorithme de signature HS256, il n’est pas nécessaire de configurer le JwkProvider.

Pour en savoir plus sur les algorithmes de signature disponibles, consultez la documentation.

L’exemple ci-dessous montre comment configurer le AuthenticationController pour l’utiliser avec l’algorithme de signature RS256 :

// src/main/java/com/auth0/example/security/Auth0AuthenticationProvider.java
 
 
 
@@ -297,12 +297,12 @@ public class Auth0AuthenticationMechanism implements HttpAuthenticationMechanism
 
 
-

La classe a priorité sur la méthode validateRequest, qui est appelée à chaque demande adressée à notre application et qui est chargée de notifier au conteneur l’état de l’authentification.

Cet exemple utilise le flux de code d’autorisation pour échanger un code d’autorisation contre un jeton au cours du processus d’authentification. Si cette requête est adressée au point de terminaison /callback et contient le paramètre de requête code, elle effectue quelques opérations importantes :

  • Elle appelle la méthode handle du AuthenticationController pour échanger le code d’autorisation contre un jeton d’identification et un jeton d’accès.

  • Elle utilise le jeton d’identification pour créer un nouveau Auth0Credential.

  • Elle appelle la méthode validate de l’implémentation personnalisée IdentityStore pour obtenir le résultat de la validation.

  • Elle informe le conteneur de l’application de l’état de la connexion.

Si la ressource demandée n’est pas /callback, elle renvoie httpMessageContext.doNothing() pour permettre la poursuite du traitement de la demande. Vous verrez bientôt comment utiliser les informations d’authentification lors du déclenchement de l’authentification et de l’affichage des vues Web.

Enfin, notez que l’annotation @AutoApplySession a été ajoutée pour permettre au conteneur de créer une session pour l’utilisateur authentifié.

+

La classe a priorité sur la méthode validateRequest, qui est appelée à chaque demande adressée à notre application et qui est chargée de notifier au conteneur l’état de l’authentification.

Cet exemple utilise le flux de code d’autorisation pour échanger un code d’autorisation contre un jeton au cours du processus d’authentification. Si cette requête est adressée au point de terminaison /callback et contient le paramètre de requête code, elle effectue quelques opérations importantes :

  • Elle appelle la méthode handle du AuthenticationController pour échanger le code d’autorisation contre un jeton d’ID et un jeton d’accès.

  • Elle utilise le jeton d’ID pour créer un nouveau Auth0Credential.

  • Elle appelle la méthode validate de l’implémentation personnalisée IdentityStore pour obtenir le résultat de la validation.

  • Elle informe le conteneur de l’application de l’état de la connexion.

Si la ressource demandée n’est pas /callback, elle renvoie httpMessageContext.doNothing() pour permettre la poursuite du traitement de la demande. Vous verrez bientôt comment utiliser les informations d’authentification lors du déclenchement de l’authentification et de l’affichage des vues Web.

Enfin, notez que l’annotation @AutoApplySession a été ajoutée pour permettre au conteneur de créer une session pour l’utilisateur authentifié.

## Déclencher l’authentification {{{ data-action="code" data-code="src/main/java/com/auth0/example/web/LoginServlet.java" }}} -

Pour permettre à un utilisateur de se connecter, créez un Servlet qui traitera les requêtes au chemin /login.

Le LoginController est responsable de rediriger la requête vers l’URL d’autorisation appropriée, où l’utilisateur peut s’authentifier avec Auth0. Il utilise le AuthenticationController du SDK Auth0 Java MVC pour construire le bon URL d’autorisation, en utilisant les valeurs de configuration injectées via Auth0AuthenticationConfig. Par défaut, cet exemple demande les permissions "openid profile email" pour permettre à l’application de récupérer les informations de profil de base auprès de l’utilisateur authentifié. Vous pouvez en savoir plus sur ces permissions dans la documentation OpenID Connect Scopes.

Une fois que l’utilisateur a entré ses identifiants et autorisé les permissions demandées, Auth0 enverra une requête au callbackUrl, incluant un paramètre de requête code qui peut être échangé contre un jeton ID et un jeton d’accès. Rappelons que le Auth0HttpAuthenticationMechanism créé ci-dessus gère cet échange afin qu’il puisse notifier le conteneur d’applications du statut d’authentification. Cela permet au Servlet qui gère les requêtes vers le chemin /callback de simplement transférer la requête à la ressource initialement demandée avant de se connecter, ou simplement de rediriger vers la page d’accueil :

// src/main/com/auth0/example/web/CallbackServlet.java
+

Pour permettre à un utilisateur de se connecter, créez un Servlet qui traitera les requêtes au chemin /login.

Le LoginController est responsable de rediriger la requête vers l’URL d’autorisation appropriée, où l’utilisateur peut s’authentifier avec Auth0. Il utilise le AuthenticationController du SDK Auth0 Java MVC pour construire le bon URL d’autorisation, en utilisant les valeurs de configuration injectées via Auth0AuthenticationConfig. Par défaut, cet exemple demande les permissions "openid profile email" pour permettre à l’application de récupérer les informations de profil de base auprès de l’utilisateur authentifié. Vous pouvez en savoir plus sur ces permissions dans la documentation OpenID Connect Scopes.

Une fois que l’utilisateur a entré ses identifiants et autorisé les permissions demandées, Auth0 enverra une requête au callbackUrl, incluant un paramètre de requête code qui peut être échangé contre un jeton d’ID et un jeton d’accès. Rappelons que le Auth0HttpAuthenticationMechanism créé ci-dessus gère cet échange afin qu’il puisse notifier le conteneur d’applications du statut d’authentification. Cela permet au Servlet qui gère les requêtes vers le chemin /callback de simplement transférer la requête à la ressource initialement demandée avant de se connecter, ou simplement de rediriger vers la page d’accueil :

// src/main/com/auth0/example/web/CallbackServlet.java
 
 
 
@@ -335,7 +335,7 @@ public class CallbackServlet extends HttpServlet {
 ## Afficher les informations de l’utilisateur {{{ data-action="code" data-code="src/main/java/com/auth0/example/web/HomeServlet.java" }}}
 
 
-

Vous pouvez utiliser Auth0JwtPrincipal pour obtenir des informations sur le profil de l’utilisateur authentifié. L’exemple de code HomeServlet.java montre comment utiliser les demandes sur le ID token (Jeton d’identification) pour définir les données de profil comme attribut de requête.

Vous pouvez ensuite utiliser ces informations de profil dans votre vue pour afficher des informations sur l’utilisateur :

<!-- src/main/webapp/WEB-INF/jsp/fragments/navbar.jspf -->
+

Vous pouvez utiliser Auth0JwtPrincipal pour obtenir des informations sur le profil de l’utilisateur authentifié. L’exemple de code HomeServlet.java montre comment utiliser les demandes sur le Jeton d’ID pour définir les données de profil comme attribut de requête.

Vous pouvez ensuite utiliser ces informations de profil dans votre vue pour afficher des informations sur l’utilisateur :

<!-- src/main/webapp/WEB-INF/jsp/fragments/navbar.jspf -->
 
 
 
@@ -397,7 +397,7 @@ public class CallbackServlet extends HttpServlet {
 ## Exécuter l’exemple
 
 
-

Pour construire et exécuter l’exemple, exécutez l’objectif Maven wildfly:run pour démarrer un serveur d’application WildFly intégré avec cette application déployée. Voir la documentation Plugiciel WildFly Maven pour plus d’informations.

Si vous utilisez Linux ou MacOS :

./mvnw clean wildfly:run
+

Pour construire et exécuter l’exemple, exécutez l’objectif Maven wildfly:run pour démarrer un serveur d’application WildFly intégré avec cette application déployée. Voir la documentation Plugiciel WildFly Maven pour plus d’informations.

Si vous utilisez Linux ou MacOS :

./mvnw clean wildfly:run
 
 
diff --git a/fr-ca/articles/quickstart/webapp/java-spring-boot/interactive.md b/fr-ca/articles/quickstart/webapp/java-spring-boot/interactive.md index 96b5a12465..0d4520695a 100644 --- a/fr-ca/articles/quickstart/webapp/java-spring-boot/interactive.md +++ b/fr-ca/articles/quickstart/webapp/java-spring-boot/interactive.md @@ -9,24 +9,24 @@ files: - files/HomeController - files/SecurityConfigWithLogout github: - path: https://github.com/auth0-samples/auth0-spring-boot-login-samples/tree/master/mvc-login + path: mvc-login locale: fr-CA --- # Ajouter une fonctionnalité de connexion à votre application Spring Web -

Vous utilisez Spring WebFlux?

Ce tutoriel utilise Spring MVC. Si vous utilisez Spring WebFlux, les étapes pour ajouter l’authentification sont similaires, mais certains détails d’implémentation sont différents. Reportez-vous au Code d’exemple Spring Boot WebFlux pour voir comment intégrer Auth0 à votre application Spring Boot WebFlux.

+

Vous utilisez Spring WebFlux?

Ce tutoriel utilise Spring MVC. Si vous utilisez Spring WebFlux, les étapes pour ajouter l’authentification sont similaires, mais certains détails d’implémentation sont différents. Reportez-vous au Code d’exemple Spring Boot WebFlux pour voir comment intégrer Auth0 à votre application Spring Boot WebFlux.

-## Configurer Auth0 +## Configuration d’Auth0 -

Pour utiliser les services Auth0, vous devez avoir une application installée dans Auth0 Dashboard. L’application Auth0 est l’endroit où vous allez configurer le fonctionnement de l’authentification pour le projet que vous développez.

Configurer une application

Utilisez le sélecteur interactif pour créer une nouvelle application Auth0 ou sélectionner une application existante qui représente le projet avec lequel vous souhaitez vous intégrer. Dans Auth0, il est attribué à chaque application un identificateur client unique alphanumérique que votre code d’application utilisera pour appeler les API Auth0 via la trousse SDK.

Tous les paramètres que vous configurez à l’aide de ce guide rapide seront automatiquement mis à jour pour votre application dans le Dashboard, qui vous permettra de gérer vos applications.

Si vous préférez explorer une configuration complète, vous pouvez plutôt consulter une application faisant office d’exemple.

Configuration des Callback URL

Une Callback URL est une URL intégrée dans votre application vers laquelle vous souhaitez qu’Auth0 redirige les utilisateurs après leur authentification. Si elle n’est pas définie, les utilisateurs ne seront pas redirigés vers votre application après s’être connectés.

Si vous suivez notre projet à titre d’exemple, définissez ceci sur

http://localhost:3000/login/oauth2/code/okta.

Configuration des URL de déconnexion

Une URL de déconnexion est une URL intégrée dans votre application vers laquelle vous souhaitez qu’Auth0 redirige les utilisateurs après leur déconnexion. Si elle n’est pas définie, les utilisateurs ne pourront pas se déconnecter de votre application et recevront un message d’erreur.

Si vous suivez notre projet à titre d’exemple, définissez ceci sur

http://localhost:3000.

+

Pour utiliser les services Auth0, vous devez avoir une application installée dans Auth0 Dashboard. L’application Auth0 est l’endroit où vous allez configurer le fonctionnement de l’authentification pour le projet que vous développez.

Configurer une application

Utilisez le sélecteur interactif pour créer une nouvelle application Auth0 ou sélectionner une application existante qui représente le projet avec lequel vous souhaitez effectuer l’intégration. Dans Auth0, chaque application se voit attribuer un identifiant client unique alphanumérique que votre code d’application utilisera pour appeler les API Auth0 via la trousse SDK.

Tous les paramètres que vous configurez à l’aide de ce guide de démarrage rapide seront automatiquement mis à jour pour votre application dans le Tableau de bord, qui est l’endroit où vous pourrez gérer vos applications à l’avenir.

Si vous préférez explorer une configuration complète, consultez plutôt un exemple d’application.

Configuration des URL de rappel

Une URL de rappel est une URL intégrée dans votre application vers laquelle vous souhaitez qu’Auth0 redirige les utilisateurs après leur authentification. Si elle n’est pas définie, les utilisateurs ne seront pas redirigés vers votre application après s’être connectés.

Si vous suivez notre projet à titre d’exemple, définissez ceci sur

http://localhost:3000/login/oauth2/code/okta.

Configuration des URL de déconnexion

Une URL de déconnexion est une URL intégrée dans votre application vers laquelle vous souhaitez qu’Auth0 redirige les utilisateurs après leur déconnexion. Si elle n’est pas définie, les utilisateurs ne pourront pas se déconnecter de votre application et recevront un message d’erreur.

Si vous suivez notre projet à titre d’exemple, définissez ceci sur

http://localhost:3000.

## Configurer l’application Sprint Boot -

Ajouter les dépendances Spring

Pour intégrer votre application Spring Boot avec Auth0, incluez Okta Spring Boot Starter dans les dépendances de votre application.

Ce guide utilise Thymeleaf et le module d’intégration Spring Security pour la couche d’affichage. Si vous utilisez une technologie d’affichage différente, la configuration et les composants de Spring Security restent les mêmes.

Si vous utilisez Gradle, vous pouvez inclure ces dépendances comme indiqué ci-dessous.

plugins {
+

Ajouter les dépendances Spring

Pour intégrer votre application Spring Boot avec Auth0, incluez Okta Spring Boot Starter dans les dépendances de votre application.

Ce guide utilise Thymeleaf et le module d’intégration Spring Security pour la couche d’affichage. Si vous utilisez une technologie d’affichage différente, la configuration et les composants de Spring Security restent les mêmes.

Si vous utilisez Gradle, vous pouvez inclure ces dépendances comme indiqué ci-dessous.

plugins {
 
  id 'java'
 
@@ -125,7 +125,7 @@ implementation 'nz.net.ultraq.thymeleaf:thymeleaf-layout-dialect'
 ## Configurer Spring Security {{{ data-action="code" data-code="application.yml" }}}
 
 
-

Okta Spring Boot Starter facilite la configuration de votre application avec Auth0. L’exemple ci-dessous utilise un fichier application.yml, mais vous pouvez également utiliser des fichiers de propriétés ou tout autre mécanisme d’externalisation pris en charge.

#src/main/resources/application.yml
+

Okta Spring Boot Starter facilite la configuration de votre application avec Auth0. L’exemple ci-dessous utilise un fichier application.yml, mais vous pouvez également utiliser des fichiers de propriétés ou tout autre mécanisme d’externalisation pris en charge.

#src/main/resources/application.yml
 
 
 
@@ -158,38 +158,36 @@ server:
 ## Ajouter une fonctionnalité de connexion à votre application {{{ data-action="code" data-code="SecurityConfig.java" }}}
 
 
-

Pour permettre aux utilisateurs de se connecter avec Auth0, créez une classe qui enregistrera une SecurityFilterChain et ajoutez l’annotation @Configuration.

Vous pouvez configurer l’instance HttpSecurity pour qu’elle exige une authentification sur tous les chemins ou seulement sur certains d’entre eux. Par exemple, pour exiger l’authentification sur tous les chemins à l’exception de la page d’accueil :

http.authorizeHttpRequests(authorize -> authorize
+

Pour permettre aux utilisateurs de se connecter avec Auth0, créez une classe qui enregistrera une SecurityFilterChain et ajoutez l’annotation @Configuration.

Vous pouvez configurer l’instance HttpSecurity pour qu’elle exige une authentification sur tous les chemins ou seulement sur certains d’entre eux. Par exemple, pour exiger l’authentification sur tous les chemins à l’exception de la page d’accueil :

http + + .authorizeHttpRequests(authorize -> authorize .requestMatchers("/").permitAll() .anyRequest().authenticated() - ); - -

- -

+ );

## Ajouter une page d’accueil {{{ data-action="code" data-code="index.html" }}} -

Okta Spring Boot Starter utilisera la configuration client que vous avez définie précédemment pour gérer la connexion lorsqu’un utilisateur visite le chemin /oauth2/authorization/okta de votre application. Vous pouvez l’utiliser pour créer un lien de connexion dans votre application.

Cette page renvoie les attributs de l’utilisateur lorsque celui-ci s’authentifie. Vous utiliserez le lien /logout dans le modèle pour mettre en œuvre la fonctionnalité de déconnexion.

+

Okta Spring Boot Starter utilisera la configuration client que vous avez définie précédemment pour gérer la connexion lorsqu’un utilisateur visite le chemin //oauth2/authorization/okta de votre application. Vous pouvez l’utiliser pour créer un lien de connexion dans votre application.

Cette page renvoie les attributs de l’utilisateur lorsque celui-ci s’authentifie. Vous utiliserez le lien /logout dans le modèle pour mettre en œuvre la fonctionnalité de déconnexion.

## Ajouter un contrôleur {{{ data-action="code" data-code="HomeController.java" }}} -

Créez un contrôleur pour traiter la demande entrante. Ce contrôleur crée la page index.html. Lorsque l’utilisateur s’authentifie, l’application récupère les attributs d’information du profil utilisateur pour créer la page.

Spring Boot - Étape 6 - Point de contrôle

Lorsque vous cliquez sur le lien de connexion, vérifiez que l’application vous redirige vers la page Auth0 Universal Login (Connexion universelle Auth0) et que vous pouvez maintenant vous connecter ou vous inscrire en utilisant un nom d’utilisateur et un mot de passe ou un fournisseur social.

+

Créez un contrôleur pour traiter la demande entrante. Ce contrôleur crée la page index.html. Lorsque l’utilisateur s’authentifie, l’application récupère les attributs d’information du profil utilisateur pour créer la page.

Spring Boot - Étape 6 - Point de contrôle

Lorsque vous cliquez sur le lien de connexion, vérifiez que l’application vous redirige vers la page Connexion universelle Auth0 et que vous pouvez maintenant vous connecter ou vous inscrire en utilisant un nom d’utilisateur et un mot de passe, ou un réseau social.

-

null

Auth0 active le fournisseur social Google par défaut sur les nouveaux locataires et vous offre des clés de développeur pour tester la connexion avec des fournisseurs d’identité sociale. Toutefois, ces clés de développeur présentent certaines limitations qui peuvent entraîner un comportement différent de votre application. Pour plus de détails sur ce comportement et comment le résoudre, consultez le document Tester les connexions sociales avec des clés de développeur Auth0.

+

null

Auth0 active le fournisseur social Google par défaut sur les nouveaux locataires et vous offre des clés de développeur pour tester la connexion avec des fournisseurs d’identité sociale. Toutefois, ces clés de développeur présentent certaines limitations qui peuvent entraîner un comportement différent de votre application. Pour plus de détails sur ce comportement et comment le résoudre, consultez le document Tester les connexions sociales avec des clés de développeur Auth0.

## Ajouter une fonctionnalité de déconnexion à votre application {{{ data-action="code" data-code="SecurityConfigWithLogout.java" }}} -

Maintenant que les utilisateurs peuvent se connecter à votre application, ils ont besoin d’un moyen de se déconnecter. Par défaut, lorsque la déconnexion est activée, Spring Security déconnecte l’utilisateur de votre application et efface la session. Pour permettre une déconnexion réussie de Auth0, vous pouvez fournir un LogoutHandler pour rediriger les utilisateurs vers votre point de terminaison de déconnexion Auth0 (https://{yourDomain}/v2/logout) et ensuite les rediriger immédiatement vers votre application.

Dans la classe SecurityConfig, fournissez un LogoutHandler qui redirige vers le point de terminaison de déconnexion Auth0, et configurez HttpSecurity pour ajouter le gestionnaire de déconnexion.

Spring Boot - Étape 7 - Point de contrôle

Lorsque vous cliquez sur le lien de déconnexion, l’application doit vous rediriger vers l’adresse que vous avez spécifiée comme l’une des « Allowed Logout URLs (URL de déconnexion autorisées » dans les « Application Settings (Paramètres d'application) » et vous n’êtes plus connecté à votre application.

+

Maintenant que les utilisateurs peuvent se connecter à votre application, ils ont besoin d’un moyen de se déconnecter. Par défaut, lorsque la déconnexion est activée, Spring Security déconnecte l’utilisateur de votre application et efface la session. Pour permettre une déconnexion réussie de Auth0, vous pouvez fournir un LogoutHandler pour rediriger les utilisateurs vers votre point de terminaison de déconnexion Auth0 (https://{yourDomain}/v2/logout) et ensuite les rediriger immédiatement vers votre application.

Dans la classe SecurityConfig, fournissez un LogoutHandler qui redirige vers le point de terminaison de déconnexion Auth0, et configurez HTTPSecurity pour ajouter le gestionnaire de déconnexion.

Spring Boot - Étape 7 - Point de contrôle

Lorsque vous cliquez sur le lien de déconnexion, l’application doit vous rediriger vers l’adresse que vous avez spécifiée comme l’une des « URL de déconnexion autorisées » dans les « Paramètres d’application » et vous n’êtes plus connecté à votre application.

diff --git a/fr-ca/articles/quickstart/webapp/java/interactive.md b/fr-ca/articles/quickstart/webapp/java/interactive.md index 25bcf993d3..8163acb793 100644 --- a/fr-ca/articles/quickstart/webapp/java/interactive.md +++ b/fr-ca/articles/quickstart/webapp/java/interactive.md @@ -1,6 +1,6 @@ --- -title: Ajouter une fonctionnalité de connexion à votre Application Java Servlet -description: Ce guide explique comment intégrer Auth0 à n’importe quelle application Java Servlet, nouvelle ou ancienne. +title: Ajouter une fonctionnalité de connexion à votre Application Java Servlet +description: Ce guide explique comment intégrer Auth0 dans n’importe quelle application Java Servlet, nouvelle ou existante. interactive: true files: - files/web @@ -10,24 +10,24 @@ files: - files/HomeServlet - files/LogoutServlet github: - path: https://github.com/auth0-samples/auth0-servlet-sample/tree/master/01-Login + path: 01-Login locale: fr-CA --- -# Ajouter une fonctionnalité de connexion à votre Application Java Servlet +# Ajouter une fonctionnalité de connexion à votre Application Java Servlet -

Auth0 vous permet d’ajouter rapidement l’authentification et de pouvoir accéder aux informations relatives au profil de l’utilisateur dans votre application. Ce guide explique comment intégrer Auth0 à n’importe quelle application Java Servlet, nouvelle ou ancienne.

+

Auth0 vous permet d’ajouter rapidement l’authentification et de pouvoir accéder aux informations relatives au profil utilisateur dans votre application. Ce guide explique comment intégrer Auth0 dans n’importe quelle application Java Servlet, nouvelle ou existante.

-## Configurer Auth0 +## Configuration d’Auth0 -

Pour utiliser les services Auth0, vous devez avoir une application installée dans Auth0 Dashboard. L’application Auth0 est l’endroit où vous allez configurer le fonctionnement de l’authentification pour le projet que vous développez.

Configurer une application

Utilisez le sélecteur interactif pour créer une nouvelle application Auth0 ou sélectionner une application existante qui représente le projet avec lequel vous souhaitez effectuer l’intégration. Dans Auth0, il est attribué à chaque application un identifiant client unique alphanumérique que votre code d’application utilisera pour appeler les API Auth0 via la trousse SDK.

Tous les paramètres que vous configurez à l’aide de ce guide rapide seront automatiquement mis à jour pour votre application dans le Dashboard, qui est l’endroit où vous pourrez gérer vos applications à l’avenir.

Si vous préférez explorer une configuration complète, vous pouvez plutôt consulter une application faisant office d’exemple.

Configuration des callback URL

Une callback URL est une URL intégrée dans votre application vers laquelle vous souhaitez qu’Auth0 redirige les utilisateurs après leur authentification. Si elle n’est pas définie, les utilisateurs ne seront pas redirigés vers votre application après s’être connectés.

Si vous suivez notre exemple de projet, définissez cette URL comme suit : http://localhost:3000/callback.

Configurer les URL de déconnexion

Une URL de déconnexion est une URL intégrée dans votre application vers laquelle vous souhaitez qu’Auth0 redirige les utilisateurs après leur déconnexion. Si elle n’est pas définie, les utilisateurs ne pourront pas se déconnecter de votre application et recevront un message d’erreur.

Si vous suivez notre exemple de projet, définissez cette URL comme suit : http://localhost:3000/logout.

+

Pour utiliser les services Auth0, vous devez avoir une application installée dans Auth0 Dashboard. L’application Auth0 est l’endroit où vous allez configurer le fonctionnement de l’authentification pour le projet que vous développez.

Configurer une application

Utilisez le sélecteur interactif pour créer une nouvelle application Auth0 ou sélectionner une application existante qui représente le projet avec lequel vous souhaitez effectuer l’intégration. Dans Auth0, chaque application se voit attribuer un identifiant client unique alphanumérique que votre code d’application utilisera pour appeler les API Auth0 via la trousse SDK.

Tous les paramètres que vous configurez à l’aide de ce guide de démarrage rapide seront automatiquement mis à jour pour votre application dans le Tableau de bord, qui est l’endroit où vous pourrez gérer vos applications à l’avenir.

Si vous préférez explorer une configuration complète, consultez plutôt un exemple d’application.

Configuration des URL de rappel

Une URL de rappel est une URL intégrée dans votre application vers laquelle vous souhaitez qu’Auth0 redirige les utilisateurs après leur authentification. Si elle n’est pas définie, les utilisateurs ne seront pas redirigés vers votre application après s’être connectés.

Si vous suivez notre exemple de projet, définissez cette URL comme suit : http://localhost:3000/callback.

Configuration des URL de déconnexion

Une URL de déconnexion est une URL intégrée dans votre application vers laquelle vous souhaitez qu’Auth0 redirige les utilisateurs après leur déconnexion. Si elle n’est pas définie, les utilisateurs ne pourront pas se déconnecter de votre application et recevront un message d’erreur.

Si vous suivez notre exemple de projet, définissez cette URL comme suit : http://localhost:3000/logout.

## Intégrer Auth0 dans votre application -

Régler les dépendances.

Pour intégrer votre application Java avec Auth0, ajoutez les dépendances suivantes :

  • javax.servlet-api

    : est la bibliothèque qui vous permet de créer des servlets Java. Vous devez ensuite ajouter une dépendance de serveur comme Tomcat ou Gretty, selon votre choix. Consultez notre code d’exemple pour plus d’informations.

  • auth0-java-mvc-commons : est la bibliothèque Java qui vous permet d’utiliser Auth0 avec Java pour des applications Web MVC côté serveur. Il génère l’URL d’autorisation que vous devez appeler pour authentifier et valide le résultat reçu au retour afin d’obtenir finalement les Jetons Auth0 qui identifient l’utilisateur.

Si vous utilisez Gradle, ajoutez-les à votre fichier build.gradle :

// build.gradle
+

Régler les dépendances.

Pour intégrer votre application Java avec Auth0, ajoutez les dépendances suivantes :

  • javax.servlet-api

    : est la bibliothèque qui vous permet de créer des servlets Java. Vous devez ensuite ajouter une dépendance de serveur comme Tomcat ou Gretty, selon votre choix. Consultez notre code d’exemple pour plus d’informations.

  • auth0-java-mvc-commons : est la bibliothèque Java qui vous permet d’utiliser Auth0 avec Java pour des applications Web MVC côté serveur. Elle génère l’URL d’autorisation que vous devez appeler pour authentifier et valide le résultat reçu au retour afin d’obtenir finalement les jetons Auth0 qui identifient l’utilisateur.

Si vous utilisez Gradle, ajoutez-les à votre build.gradle :

// build.gradle
 
 
 
@@ -68,7 +68,7 @@ compile 'com.auth0:mvc-auth-commons:1.+'W
 ## Configurer votre application Java {{{ data-action="code" data-code="web.xml" }}}
 
 
-

Votre application Java a besoin de certaines informations pour s’authentifier auprès de votre compte Auth0. Les exemples lisent ces informations à partir du fichier descripteur de déploiement src/main/webapp/WEB-INF/web.xml, mais vous pouvez les stocker ailleurs.

Ces informations seront utilisées pour configurer la bibliothèque auth0-java-mvc-commons afin de permettre aux utilisateurs de se connecter à votre application. Pour en savoir plus sur la bibliothèque, y compris ses différentes options de configuration, consultez la documentation de la bibliothèque.

Vérifier les attributs remplis

Si vous avez téléchargé cet exemple en utilisant le bouton Download Sample (Télécharger l’exemple), les attributs domain, clientId et clientSecret seront remplis pour vous. Vous devez vérifier que les valeurs sont correctes, surtout si vous avez plusieurs applications Auth0 dans votre compte.

Structure du projet

Le projet faisant office d’exemple, qui peut être téléchargé en utilisant le bouton Download Sample (Télécharger l’exemple) a la structure suivante :

- src
+

Votre application Java a besoin de certaines informations pour s’authentifier auprès de votre compte Auth0. Les exemples lisent ces informations à partir du fichier descripteur de déploiement src/main/webapp/WEB-INF/web.xml, mais vous pouvez les stocker ailleurs.

Ces informations seront utilisées pour configurer la bibliothèque auth0-java-mvc-commons afin de permettre aux utilisateurs de se connecter à votre application. Pour en savoir plus sur la bibliothèque, y compris ses différentes options de configuration, consultez la documentation de la bibliothèque.

Vérifier les attributs remplis

Si vous avez téléchargé cet exemple en utilisant le bouton Download Sample (Télécharger l’exemple), les attributs domain, clientId et clientSecret seront remplis pour vous. Vous devez vérifier que les valeurs sont correctes, surtout si vous avez plusieurs applications Auth0 dans votre compte.

Structure du projet

L’exemple de projet, qui peut être téléchargé en utilisant le bouton Download Sample (Télécharger l’exemple) a la structure suivante :

- src
 
 -- main
 
@@ -106,22 +106,22 @@ compile 'com.auth0:mvc-auth-commons:1.+'W
 
 
-

Le projet contient un seul JSP : home.jsp qui affichera les jetons associés à l’utilisateur après une connexion réussie et proposera l’option de déconnexion.

Le projet contient un WebFilter : le Auth0Filter.java qui vérifiera l’existence de jetons avant de donner à l’utilisateur accès à notre chemin protégé /portal/* . Si les jetons n’existent pas, la requête sera redirigée vers LoginServlet.

Le projet contient également quatre servlets :

  • LoginServlet.java: Appelé lorsque l’utilisateur essaie de se connecter. Le servlet utilise les paramètres client_id et domain pour créer une URL d’autorisation valide et y redirige l’utilisateur.

  • CallbackServlet.java : Le servlet enregistre les requêtes adressées à notre callback URL et traite les données pour obtenir les identifiants. Après une connexion réussie, les identifiants sont ensuite enregistrés dans la HttpSession de la requête.

  • HomeServlet.java: Le servlet lit les jetons précédemment enregistrés et les affiche sur la ressource home.jsp.

  • LogoutServlet.java: Appelé lorsque l’utilisateur clique sur le lien de déconnexion. Le servlet invalide la session de l’utilisateur et redirige l’utilisateur vers la page de connexion, gérée par LoginServlet.

  • AuthenticationControllerProvider.java : Responsable de la création et de la gestion d’une seule instance de AuthenticationController

+

Le projet contient un seul JSP : home.jsp qui affichera les jetons associés à l’utilisateur après une connexion réussie et proposera l’option de déconnexion.

Le projet contient un WebFilter : le Auth0Filter.java qui vérifiera l’existence de jetons avant de donner à l’utilisateur accès à notre chemin protégé /portal/*. Si les jetons n’existent pas, la requête sera redirigée vers LoginServlet.

Le projet contient également quatre servlets :

  • LoginServlet.java : Appelé lorsque l’utilisateur essaie de se connecter. Le servlet utilise les paramètres client_id et domain pour créer une URL d’autorisation valide et y redirige l’utilisateur.

  • CallbackServlet.java : Le servlet enregistre les requêtes adressées à notre URL de rappel et traite les données pour obtenir les identifiants. Après une connexion réussie, les identifiants sont ensuite enregistrés dans la HttpSession de la requête.

  • HomeServlet.java : Le servlet lit les jetons précédemment enregistrés et les affiche sur la ressource home.jsp.

  • LogoutServlet.java : Appelé lorsque l’utilisateur clique sur le lien de déconnexion. Le servlet invalide la session de l’utilisateur et redirige l’utilisateur vers la page de connexion, gérée par LoginServlet.

  • AuthenticationControllerProvider.java : Responsable de la création et de la gestion d’une seule instance de AuthenticationController

## Créer l’AuthenticationController {{{ data-action="code" data-code="AuthenticationControllerProvider.java#5:26" }}} -

Pour permettre aux utilisateurs de s’authentifier, créez une instance de l’AuthenticationController fournie par la trousse SDK auth0-java-mvc-commons en utilisant le domain, clientId, et clientSecret. L’exemple présente comment configurer le composant pour l’utiliser avec des jetons signés à l’aide de l’algorithme de signature asymétrique RS256, en précisant un JwkProvider pour récupérer la clé publique utilisée pour vérifier la signature du jeton. Consultez le référentiel jwks-rsa-java pour en savoir plus sur les options de configuration supplémentaires. Si vous utilisez HS256, il n’est pas nécessaire de configurer JwkProvider.

AuthenticationController ne stocke aucun contexte et est destiné à être réutilisé. Une création inutile peut entraîner la génération de ressources supplémentaires, ce qui peut avoir une incidence sur les performances.

+

Pour permettre aux utilisateurs de s’authentifier, créez une instance de l’AuthenticationController fournie par la trousse SDK auth0-java-mvc-commons en utilisant le domain, clientId, et clientSecret. L’exemple présente comment configurer le composant pour l’utiliser avec des jetons signés à l’aide de l’algorithme de signature asymétrique RS256, en précisant un JwkProvider pour récupérer la clé publique utilisée pour vérifier la signature du jeton. Consultez le référentiel jwks-rsa-java pour en savoir plus sur les options de configuration supplémentaires. Si vous utilisez HS256, il n’est pas nécessaire de configurer JwkProvider.

AuthenticationController ne stocke aucun contexte et est destiné à être réutilisé. Une création inutile peut entraîner la génération de ressources supplémentaires, ce qui peut avoir une incidence sur les performances.

## Redirection de connexion {{{ data-action="code" data-code="LoginServlet.java#21:23" }}} -

Pour permettre aux utilisateurs de se connecter, votre application les redirigera vers la page de Universal Login[connexion universelle]. En utilisant l’instance AuthenticationController , vous pouvez générer l’URL de redirection en appelant la méthode buildAuthorizeUrl(HttpServletRequest request, HttpServletResponse response, String redirectUrl) L’URL de redirection doit être celle qui a été ajoutée aux Allowed Callback URLs (Callback URL autorisées) de votre application Auth0.

+

Pour permettre aux utilisateurs de se connecter, votre application les redirigera vers la page de Connexion universelle. En utilisant l’instance AuthenticationController , vous pouvez générer l’URL de redirection en appelant la méthode buildAuthorizeUrl(HttpServletRequest request, HttpServletResponse response, String redirectUrl). L’URL de redirection doit être celle qui a été ajoutée aux URL de rappel autorisées de votre application Auth0.

## Gérer les jetons {{{ data-action="code" data-code="CallbackServlet.java#16:37" }}} -

Après que l’utilisateur s’est connecté, le résultat sera reçu dans notreCallbackServlet via une requête HTTP GET ou POST. Comme nous utilisons le flux de code d’autorisation (par défaut), une requête GET sera envoyée. Si vous avez configuré la bibliothèque pour le flux implicite, une requête POST sera plutôt envoyée.

La requête contient le contexte d’appel que la bibliothèque a précédemment défini en générant l’URL d’autorisation avec AuthenticationController. Lorsqu’il est passé au contrôleur, vous recevez soit une instance de Tokens valide soit une Exception indiquant ce qui a mal tourné. En cas d’appel réussi, vous devez enregistrer les identifiants afin de pouvoir y accéder ultérieurement. Vous pouvez utiliser HttpSession de la requête en utilisant la classe SessionsUtils comprise dans la bibliothèque.

Il est recommandé d’enregistrer le moment où nous avons demandé les jetons ainsi que la valeur expiresIn reçue, afin que la prochaine fois que nous utiliserons le jeton, nous puissions vérifier s’il a déjà expiré ou s’il est encore valide. Pour les besoins de cet exemple, nous ignorerons cette validation.

+

Après que l’utilisateur s’est connecté, le résultat sera reçu dans notre CallbackServlet via une requête HTTP GET ou POST. Comme nous utilisons le flux de code d’autorisation (par défaut), une requête GET sera envoyée. Si vous avez configuré la bibliothèque pour le flux implicite, une requête POST sera plutôt envoyée.

La requête contient le contexte d’appel que la bibliothèque a précédemment défini en générant l’URL d’autorisation avec AuthenticationController. Lorsqu’il est passé au contrôleur, vous recevez soit une instance Tokens valide soit une Exception indiquant ce qui a mal tourné. En cas d’appel réussi, vous devez enregistrer les identifiants afin de pouvoir y accéder ultérieurement. Vous pouvez utiliser HttpSession de la requête en utilisant la classe SessionsUtils comprise dans la bibliothèque.

Il est recommandé d’enregistrer le moment où nous avons demandé les jetons ainsi que la valeur expiresIn reçue, afin que la prochaine fois que nous utiliserons le jeton, nous puissions vérifier s’il a déjà expiré ou s’il est encore valide. Pour les besoins de cet exemple, nous ignorerons cette validation.

## Afficher la page d’accueil {{{ data-action="code" data-code="HomeServlet.java#4:14" }}} @@ -136,4 +136,4 @@ compile 'com.auth0:mvc-auth-commons:1.+'W ## Exécuter l’exemple -

Pour exécuter l’exemple à partir d’un terminal, changez de répertoire en dossier racine de projet et exécutez la ligne suivante :

./gradlew clean app

Après quelques secondes, l’application sera accessible sur http://localhost:3000/. Essayez d’accéder à la ressource protégée http://localhost:3000/portal/home et notez comment vous êtes redirigé par Auth0Filter vers la page de connexion Auth0. Le widget affiche toutes les connexions vis réseau social et de base de données que vous avez définies pour cette application dans dashboard.

null

Vous serez en mesure de voir le contenu de la page d’accueil après une authentification réussie.

null

Déconnectez-vous en cliquant sur le bouton logout (déconnexion) en haut à droite de la page d’accueil.

+

Pour exécuter l’exemple à partir d’un terminal, placez-vous dans le dossier racine du projet et exécutez la ligne suivante :

./gradlew clean app

Après quelques secondes, l’application sera accessible sur http://localhost:3000/. Essayez d’accéder à la ressource protégée http://localhost:3000/portal/home et notez comment vous êtes redirigé par Auth0Filter vers la page de connexion Auth0. Le gadget logiciel affiche toutes les connexions via réseaux sociaux et de bases de données que vous avez définies pour cette application dans le tableau de bord.

null

Vous serez en mesure de voir le contenu de la page d’accueil après une authentification réussie.

null

Déconnectez-vous en cliquant sur le bouton logout (déconnexion) en haut à droite de la page d’accueil.

diff --git a/fr-ca/articles/quickstart/webapp/laravel/interactive.md b/fr-ca/articles/quickstart/webapp/laravel/interactive.md index e39d3d699d..a289825937 100644 --- a/fr-ca/articles/quickstart/webapp/laravel/interactive.md +++ b/fr-ca/articles/quickstart/webapp/laravel/interactive.md @@ -1,61 +1,225 @@ --- title: Ajouter une connexion à votre application Laravel -description: Ce guide montre comment intégrer Auth0 avec une nouvelle (ou existante) application Laravel 9 ou 10. +description: Ce guide montre comment intégrer Auth0 avec une nouvelle (ou existante) application Laravel 9 ouº10. interactive: true files: - files/routes/web github: - path: https://github.com/auth0-samples/laravel/tree/bf356d877b5dae566286fc8400da94b8b4b0ac76/sample + path: sample locale: fr-CA --- # Ajouter une connexion à votre application Laravel -

La trousse SDK Laravel Auth0 vous permet d’ajouter rapidement l’authentification, la gestion du profil utilisateur et le contrôle d’accès au routage à votre application Laravel. Ce guide montre comment intégrer Auth0 avec une nouvelle (ou existante) application Laravel 9 ou 10.

+

La Auth0’s Laravel SDK (trousse SDK Laravel Auth0) vous permet d’ajouter rapidement l’authentification, la gestion du profil utilisateur et le contrôle d’accès au routage à votre application Laravel. Ce guide explique comment intégrer Auth0 avec une nouvelle (ou existante) application Laravel 9 or 10 (Laravel 9 ou 10).

-## Installation de Laravel +## Installer Laravel -

Si vous n’avez pas déjà configuré une application Laravel, ouvrez un terminal dans un répertoire approprié pour un nouveau projet et exécutez la commande suivante :

composer create-project --prefer-dist laravel/laravel auth0-laravel-app ^9.0

Toutes les commandes de ce guide supposent que vous les exécutez à partir du répertoire racine de votre projet Laravel, donc vous devriez cd dans le nouveau répertoire du projet :

cd auth0-laravel-app

+

Si vous n’avez pas déjà configuré une application Laravel, ouvrez un shell dans un répertoire approprié pour un nouveau projet et exécutez la commande suivante :

composer create-project --prefer-dist laravel/laravel auth0-laravel-app ^9.0

Toutes les commandes de ce guide supposent que vous les exécutez à partir de la racine de votre projet Laravel, donc vous devez placer cd dans le nouveau répertoire du projet :

cd auth0-laravel-app

## Installation de la trousse SDK -

Exécutez la commande suivante dans le répertoire de votre projet pour installer la trousse SDK Laravel Auth0:

composer require auth0/login:^7.8 --update-with-all-dependencies

Puis, générez un fichier de configuration pour la trousse SDK pour votre application :

php artisan vendor:publish --tag auth0

+

Exécutez la commande suivante dans le répertoire de votre projet pour installer la trousse Auth0 Laravel SDK :

composer require auth0/login:^7.8 --update-with-all-dependencies

Générez ensuite un fichier de configuration pour la trousse SDK pour votre application :

php artisan vendor:publish --tag auth0

-## Configuration de la trousse SDK +## Configuration SDK -

Exécutez la commande suivante à partir du répertoire de votre projet pour télécharger le CLI Auth0 :

curl -sSfL https://raw.githubusercontent.com/auth0/auth0-cli/main/install.sh | sh -s -- -b .

Ensuite, authentifiez l'interface de ligne de commande avec votre compte Auth0 en choisissant « as a user (en tant qu’utilisateur) » lorsque vous y êtes invité :

./auth0 login

Ensuite, créez une nouvelle application avec Auth0 :

Vous devez également créer une nouvelle API :

Cela produit deux fichiers qui configurent la trousse SDK dans votre répertoire de projet.

Comme ces fichiers contiennent des renseignements personnels, il est important de les traiter comme étant sensibles. Vous devez vous assurer de ne pas les soumettre au contrôle de version. Si vous utilisez Git, vous devez les ajouter à votre fichier .gitignore :

echo ".auth0.*.json" >> .gitignore

+

Exécutez la commande suivante à partir du répertoire de votre projet pour télécharger l’interface de ligne de commande (CLI) Auth0 :

curl -sSfL HTTPs://raw.githubusercontent.com/auth0/auth0-cli/main/install.sh | sh -s -- -b .

Ensuite, authentifiez la CLI avec votre compte Auth0 en choisissant « as a user (en tant qu’utilisateur) » lorsque vous y êtes invité :

./auth0 login

Ensuite, créez une nouvelle application avec Auth0 :

./auth0 apps create \
+
+  --name "My Laravel Application" \
+
+  --type "regular" \
+
+  --auth-method "post" \
+
+  --callbacks "http://localhost:8000/callback" \
+
+  --logout-urls "http://localhost:8000" \
+
+  --reveal-secrets \
+
+  --no-input \
+
+  --json > .auth0.app.json
+
+
+ +

Vous devez également créer une nouvelle API :

./auth0 apis create \
+
+  --name "My Laravel Application's API" \
+
+  --identifier "https://github.com/auth0/laravel-auth0" \
+
+  --offline-access \
+
+  --no-input \
+
+  --json > .auth0.api.json
+
+
+ +

Cela produit deux fichiers qui configurent la trousse SDK dans votre répertoire de projet.

Comme ces fichiers contiennent des renseignements personnels, il est important de les traiter comme étant sensibles. Vous devez vous assurer de ne pas les soumettre au contrôle de version. Si vous utilisez Git, vous devez les ajouter à votre fichier .gitignore :

echo ".auth0.*.json" >> .gitignore

## Routes de connexion -

La trousse SDK enregistre automatiquement toutes les routes nécessaires pour que les utilisateurs de votre application s’authentifient.

Si vous avez besoin d’un plus grand contrôle sur les utilisateurs, ou s’ils entrent en conflit avec les routes existantes dans votre application, vous pouvez enregistrer manuellement les contrôleurs de la trousse SDK. Veuillez consulter le le fichier de mise à jour de la trousse SDK pour les intégrations avancées.

+

La trousse SDK enregistre automatiquement toutes les routes nécessaires pour que les utilisateurs de votre application s’authentifient.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
**Routes****Objet**
/loginInitie le flux d’authentification.
/logoutDéconnecte l’utilisateur.
/callbackGère le rappel de Auth0.

Si vous avez besoin d’un plus grand contrôle sur les utilisateurs, ou s’ils entrent en conflit avec les routes existantes dans votre application, vous pouvez enregistrer manuellement les contrôleurs de la trousse SDK. Veuillez consulter le fichier de mise à jour de la trousse SDK README pour les intégrations avancées.

## Contrôle d’accès {{{ data-action="code" data-code="routes/web.php#6:12" }}} -

Les installations d’authentification de Laravel utilisent des « gardes » pour définir comment les utilisateurs sont authentifiés pour chaque demande. Vous pouvez utiliser la protection d’authentification de la trousse SDK Auth0 pour restreindre l’accès aux routes de votre application.

Pour exiger que les utilisateurs s’authentifient avant d’accéder à une route, vous pouvez utiliser l’intergiciel auth de Laravel.

Vous pouvez également exiger que les utilisateurs authentifiés aient des autorisations spécifiques en combinant cela avec l'intergiciel can de Laravel.

+

Les installations d’authentification de Laravel utilisent des « gardes » pour définir comment les utilisateurs sont authentifiés pour chaque demande. Vous pouvez utiliser la protection d’authentification de la trousse SDK Auth0 pour restreindre l’accès aux routes de votre application.

Pour exiger que les utilisateurs s’authentifient avant d’accéder à une route, vous pouvez utiliser l’intergiciel auth de Laravel.

Route::get('/private', function () {
+
+  return response('Welcome! You are logged in.');
+
+})->middleware('auth');
+
+
+ +

Vous pouvez également exiger que les utilisateurs authentifiés aient des autorisations spécifiques en combinant cela avec l'intergiciel can de Laravel.

Route::get('/scope', function () {
+
+    return response('You have `read:messages` permission, and can therefore access this resource.');
+
+})->middleware('auth')->can('read:messages');
+
+
+ +

## Renseignements de l’utilisateur {{{ data-action="code" data-code="routes/web.php#14:24" }}} -

Les renseignements de l’utilisateur authentifié sont disponibles via la Facade Auth de Laravel, ou de la fonction helper auth().

Par exemple, pour récupérer l’identifiant et l’adresse courriel de l’utilisateur :

+

Les renseignements de l’utilisateur authentifié sont accessibles à partir de la Facade Auth de Laravel, ou de la fonction d’assistance auth().

Par exemple, pour récupérer l’identificateur et l’adresse courriel de l’utilisateur :

Route::get('/', function () {
+
+  if (! auth()->check()) {
+
+    return response('You are not logged in.');
+
+  }
+
+
+
+  $user = auth()->user();
+
+  $name = $user->name ?? 'User';
+
+  $email = $user->email ?? '';
+
+
+
+  return response("Hello {$name}! Your email address is {$email}.");
+
+});;
+
+
+ +

## Gestion des utilisateurs {{{ data-action="code" data-code="routes/web.php#26:43" }}} -

Vous pouvez mettre à jour les informations utilisateur en utilisant le Management API Auth0. Tous les terminaux de gestion sont accessibles via la méthode management() de la trousse SDK.

Avant de faire des appels au Management API, vous devez permettre à votre application de communiquer avec le Management API. Cela peut être fait à partir de la page API du Auth0 Dashboard, en choisissant Auth0 Management API et en sélectionnant l’onglet « Machine to Machine Applications » (Communications de machine à machine). Autorisez votre application Laravel, puis cliquez sur la flèche vers le bas pour choisir les permissions que vous souhaitez accorder.

Pour l’exemple suivant, dans lequel nous allons mettre à jour les métadonnées d’un utilisateur et attribuer une couleur préférée aléatoire, vous devez accorder les permissions read:users et update:users . Une liste des points de terminaison API et des permissions requises peuvent être trouvées dans la documentation de la Management API.

Un guide de référence rapide de toutes les méthodes du Management API de la trousse SDK est disponible ici.

+

Vous pouvez mettre à jour les informations utilisateur en utilisant la Auth0 Management API. Tous les terminaux de gestion sont accessibles via la méthode management() de la trousse SDK.

Avant de faire des appels à la Management API, vous devez permettre à votre application de communiquer avec la Management API. Cela peut être fait à partir de la page API du Auth0 Dashboard, en choisissant la Auth0 Management API et en sélectionnant l’onglet Machine to Machine Applications (Communication entre machines). Autoriser votre application Laravel, puis cliquez sur la flèche vers le bas pour choisir les permissions que vous souhaitez accorder.

Pour l’exemple suivant, dans lequel nous allons mettre à jour les métadonnées d’un utilisateur et attribuer une couleur préférée aléatoire, vous devez accorder les permissions read:users et update:users. Une liste des points de terminaison API et les permissions requises peuvent être trouvées dans la documentation de la Management API.

use Auth0\Laravel\Facade\Auth0;
+
+
+
+Route::get('/colors', function () {
+
+  $endpoint = Auth0::management()->users();
+
+
+
+  $colors = ['red', 'blue', 'green', 'black', 'white', 'yellow', 'purple', 'orange', 'pink', 'brown'];
+
+
+
+  $endpoint->update(
+
+    id: auth()->id(),
+
+    body: [
+
+        'user_metadata' => [
+
+            'color' => $colors[random_int(0, count($colors) - 1)]
+
+        ]
+
+    ]
+
+  );
+
+
+
+  $metadata = $endpoint->get(auth()->id());
+
+  $metadata = Auth0::json($metadata);
+
+
+
+  $color = $metadata['user_metadata']['color'] ?? 'unknown';
+
+  $name = auth()->user()->name;
+
+
+
+  return response("Hello {$name}! Your favorite color is {$color}.");
+
+})->middleware('auth');
+
+
+ +

Un guide de référence rapide de toutes les méthodes de la Management API de la trousse SDK est disponible ici.

-## Exécuter l'application +## Exécuter l’application -

Vous êtes maintenant prêt à lancer votre application Laravel, de sorte qu'elle puisse accepter les demandes.

php artisan serve

Laravel - Étape 8 - Exécuter l’application - Point de contrôle

Ouvrez votre navigateur Web et essayez d’accéder aux routes suivantes :

+

Vous êtes maintenant prêt à lancer votre application Laravel, de sorte qu’elle puisse accepter les demandes :

php artisan serve

Laravel – Étape 8 – Exécuter l’application – Point de contrôle

Ouvrez votre navigateur Web et essayez d’accéder aux routes suivantes :

-

Lecture supplémentaire

  • User Repositories and Models (Référentiels et modèles d’utilisateurs) étend la trousse SDK Laravel Auth0 pour utiliser des modèles d’utilisateurs personnalisés, et comment stocker et récupérer les utilisateurs à partir d’une base de données.

  • Hooking Events (Événements de rappel) explique comment intercepter les événements déclenchés par la trousse SDK Auth0 pour Laravel, afin de personnaliser entièrement le comportement de votre intégration.

  • Le support du Management API est intégré à la trousse SDK Laravel Auth0, vous permettant d’interagir avec le Management API à partir de votre application Laravel.

+

Lecture supplémentaire

  • Référentiels et modèles d’utilisateurs étend la trousse SDK Laravel Auth0 pour utiliser des modèles d’utilisateurs personnalisés, et comment stocker et récupérer les utilisateurs à partir d’une base de données.

  • Événements d’appels explique comment écouter les événements soulevés par la trousse SDK Laravel Auth0, pour personnaliser pleinement le comportement de votre intégration.

  • Le soutien de la Management API est intégré à la trousse SDK Laravel Auth0, vous permettant d’interagir avec Management API à partir de votre application Laravel.

diff --git a/fr-ca/articles/quickstart/webapp/nextjs/files/.env.md b/fr-ca/articles/quickstart/webapp/nextjs/files/.env.md index 515f3b4950..e4de060766 100644 --- a/fr-ca/articles/quickstart/webapp/nextjs/files/.env.md +++ b/fr-ca/articles/quickstart/webapp/nextjs/files/.env.md @@ -6,7 +6,7 @@ language: ``` AUTH0_SECRET='use [openssl rand -hex 32] to generate a 32 bytes value' APP_BASE_URL='http://localhost:3000' -AUTH0_ISSUER_BASE_URL='https://${account.namespace}' +AUTH0_DOMAIN='https://${account.namespace}' AUTH0_CLIENT_ID='${account.clientId}' AUTH0_CLIENT_SECRET='${account.clientSecret}' ``` diff --git a/fr-ca/articles/quickstart/webapp/nextjs/interactive.md b/fr-ca/articles/quickstart/webapp/nextjs/interactive.md index ba3ee3a1b4..3eecb9dc9e 100644 --- a/fr-ca/articles/quickstart/webapp/nextjs/interactive.md +++ b/fr-ca/articles/quickstart/webapp/nextjs/interactive.md @@ -8,7 +8,7 @@ files: - files/src/middleware - files/src/app/page github: - path: https://github.com/auth0-samples/auth0-nextjs-samples/tree/main/Sample-01 + path: Sample-01 locale: fr-CA --- @@ -17,30 +17,30 @@ locale: fr-CA

Ce guide explique comment intégrer Auth0 à n’importe quelle application Next.js, nouvelle ou existante, à l’aide de la trousse SDK Next.js Auth0. Nous vous recommandons de vous connecter pour suivre ce guide de démarrage rapide avec les exemples configurés pour votre compte.

-## Configurer Auth0 +## Configuration d’Auth0 -

Pour utiliser les services Auth0, vous devez avoir une application installée dans Auth0 Dashboard. L’application Auth0 est l’endroit où vous allez configurer le fonctionnement de l’authentification pour le projet que vous développez.

Configurer une application

Utilisez le sélecteur interactif pour créer une nouvelle application Auth0 ou sélectionner une application existante qui représente le projet avec lequel vous souhaitez vous intégrer. Dans Auth0, il est attribué à chaque application un identificateur client unique alphanumérique que votre code d’application utilisera pour appeler les API Auth0 via la trousse SDK.

Tous les paramètres que vous configurez à l’aide de ce guide rapide seront automatiquement mis à jour pour votre application dans le Dashboard, qui vous permettra de gérer vos applications.

Si vous préférez explorer une configuration complète, vous pouvez plutôt consulter une application faisant office d’exemple.

Configuration des Callback URL

Une Callback URL est une URL intégrée dans votre application vers laquelle vous souhaitez qu’Auth0 redirige les utilisateurs après leur authentification. Si elle n’est pas définie, les utilisateurs ne seront pas redirigés vers votre application après s’être connectés.

Si vous suivez notre projet à titre d’exemple, définissez ceci sur http://localhost:3000/api/auth/callback.

Configuration des URL de déconnexion

Une URL de déconnexion est une URL intégrée dans votre application vers laquelle vous souhaitez qu’Auth0 redirige les utilisateurs après leur déconnexion. Si elle n’est pas définie, les utilisateurs ne pourront pas se déconnecter de votre application et recevront un message d’erreur.

Si vous suivez notre projet à titre d’exemple, définissez ceci sur http://localhost:3000.

+

Pour utiliser les services Auth0, vous devez avoir une application installée dans Auth0 Dashboard. L’application Auth0 est l’endroit où vous allez configurer le fonctionnement de l’authentification pour le projet que vous développez.

Configurer une application

Utilisez le sélecteur interactif pour créer une nouvelle application Auth0 ou sélectionner une application existante qui représente le projet avec lequel vous souhaitez effectuer l’intégration. Dans Auth0, chaque application se voit attribuer un identifiant client unique alphanumérique que votre code d’application utilisera pour appeler les API Auth0 via la trousse SDK.

Tous les paramètres que vous configurez à l’aide de ce guide rapide seront automatiquement mis à jour pour votre application dans le Tableau de bord, qui est l’endroit où vous pourrez gérer vos applications à l’avenir.

Si vous préférez explorer une configuration complète, consultez plutôt un exemple d’application.

Configuration des URL de rappel

Une URL de rappel est une URL intégrée dans votre application vers laquelle vous souhaitez qu’Auth0 redirige les utilisateurs après leur authentification. Si elle n’est pas définie, les utilisateurs ne seront pas redirigés vers votre application après s’être connectés.

Si vous suivez notre projet à titre d’exemple, définissez ceci sur http://localhost:3000/api/auth/callback.

Configuration des URL de déconnexion

Une URL de déconnexion est une URL intégrée dans votre application vers laquelle vous souhaitez qu’Auth0 redirige les utilisateurs après leur déconnexion. Si elle n’est pas définie, les utilisateurs ne pourront pas se déconnecter de votre application et recevront un message d’erreur.

Si vous suivez notre projet à titre d’exemple, définissez ceci sur http://localhost:3000.

## Installer la trousse SDK Next.js Auth0 -

Exécutez la commande suivante dans le répertoire de votre projet pour installer la trousse SDK Next.js Auth0 :

npm install @auth0/nextjs-auth0

La trousse SDK expose des méthodes et des variables qui vous aident à intégrer Auth0 à votre application Next.js en utilisant les gestionnaires de route côté dorsal et le contexte React avec les appels React côté frontal.

+

Exécutez la commande suivante dans le répertoire de votre projet pour installer la trousse SDK Next.js Auth0 :

npm install @auth0/nextjs-auth0

La trousse SDK expose des méthodes et des variables qui vous aident à intégrer Auth0 à votre application Next.js en utilisant les gestionnaires de route sur le système dorsal et le contexte React avec les Crochets React sur le système frontal.

## Configuration de la trousse SDK {{{ data-action="code" data-code=".env.local" }}} -

Dans le répertoire racine de votre projet, ajoutez le fichier .env.local avec les variables d’environnement suivantes :

  • AUTH0_SECRET : valeur secrète longue utilisée pour chiffrer le témoin de session. Vous pouvez générer une chaîne appropriée en utilisant openssl rand -hex 32 sur la ligne de commande.

  • AUTH0_BASE_URL : URL de base de votre application.

  • AUTH0_ISSUER_BASE_URL : URL de votre domaine de locataire Auth0. Si vous utilisez un domaine personnalisé avec Auth0, utilisez la valeur de votre domaine personnalisé au lieu de la valeur indiquée dans l’onglet Settings (Paramètres).

  • AUTH0_CLIENT_ID : identifiant client de votre application Auth0.

  • AUTH0_CLIENT_SECRET : secret client de votre application Auth0.

La trousse SDK lira ces valeurs à partir de l’environnement du processus Node.js et se configurera automatiquement.

+

Dans le répertoire racine de votre projet, ajoutez le fichier .env.local avec les variables d’environnement suivantes :

  • AUTH0_SECRET : valeur secrète longue utilisée pour chiffrer le témoin de session. Vous pouvez générer une chaîne appropriée en utilisant openssl rand -hex 32 sur la ligne de commande.

  • AUTH0_BASE_URL : URL de base de votre application.

  • AUTH0_ISSUER_BASE_URL : URL de votre domaine de locataire Auth0. Si vous utilisez un domaine personnalisé avec Auth0, utilisez la valeur de votre domaine personnalisé au lieu de la valeur indiquée dans l’onglet Settings (Paramètres).

  • AUTH0_CLIENT_ID : identifiant client de votre application Auth0.

  • AUTH0_CLIENT_SECRET : secret client de votre application Auth0.

La trousse SDK lira ces valeurs à partir de l’environnement du processus Node.js et se configurera automatiquement.

## Ajouter le gestionnaire de route dynamique {{{ data-action="code" data-code="src/lib/auth0.ts" }}} -

Ce guide rapide s’adresse au routeur d’application Next.js. Si vous utilisez le routeur Pages, consultez l’exemple dans le README de la trousse SDK.

Créez un fichier dans app/api/auth/[auth0]/route.js. Il s’agit de votre fichier Route Handler (Gestionnaire de route) avec un Dynamic Route Segment (Segment de route dynamique).

Ensuite, importez la méthode handleAuth de la trousse SDK et appelez-la à partir de l’exportation GET. Cette opération crée les routes suivantes :

  • /api/auth/login : la route utilisée pour se connecter avec Auth0.

  • /api/auth/logout : la route utilisée pour déconnecter l’utilisateur.

  • /api/auth/callback : la route vers laquelle Auth0 redirigera l’utilisateur après une connexion réussie.

  • /api/auth/me : la route à partir de laquelle le profil utilisateur doit être récupéré.

+

Ce guide rapide s’adresse au routeur d’application Next.js. Si vous utilisez le routeur Pages, consultez l’exemple dans le README de la trousse SDK.

Créez un fichier dans app/api/auth/[auth0]/route.js. Il s’agit de votre fichier Route Handler (Gestionnaire de route) avec un Dynamic Route Segment (Segment de route dynamique).

Ensuite, importez la méthode handleAuth de la trousse SDK et appelez-la à partir de l’exportation GET. Cette opération crée les routes suivantes :

  • /api/auth/login : la route utilisée pour se connecter avec Auth0.

  • /api/auth/logout : la route utilisée pour déconnecter l’utilisateur.

  • /api/auth/callback : la route vers laquelle Auth0 redirigera l’utilisateur après une connexion réussie.

  • /api/auth/me : la route à partir de laquelle le profil utilisateur doit être récupéré.

## Ajouter le composant UserProvider {{{ data-action="code" data-code="src/middleware.ts" }}} -

Côté frontal, la trousse SDK utilise React Context pour gérer l’état d’authentification de vos utilisateurs. Pour que cet état soit accessible à toutes vos pages, vous devez remplacer le Root Layout component (composant Disposition racine) et envelopper la balise <body> avec un UserProvider dans le fichier app/layout.jsx.

L’état d’authentification exposé par UserProvider est accessible dans n’importe quel composant client à l’aide de l’appel useUser().

Next.js - Étape 5 - Point de contrôle

Maintenant que vous avez ajouté le Route handler (Gestionnaire de route) et UserProvider, exécutez votre application pour vérifier qu’elle ne génère pas d’erreurs liées à Auth0.

+

Côté frontal, la trousse SDK utilise React Context pour gérer l’état d’authentification de vos utilisateurs. Pour que cet état soit accessible à toutes vos pages, vous devez remplacer le Root Layout component (composant Disposition racine) et envelopper la balise <body> avec un UserProvider dans le fichier app/layout.jsx.

L’état d’authentification exposé par UserProvider est accessible dans n’importe quel composant client à l’aide de l’appel useUser().

Next.js - Étape 5 - Point de contrôle

Maintenant que vous avez ajouté le gestionnaire de route et UserProvider, exécutez votre application pour vérifier qu’elle ne génère pas d’erreurs liées à Auth0.

@@ -51,21 +51,21 @@ locale: fr-CA ## Ajouter une connexion à votre application {{{ data-action="code" data-code="src/app/page.tsx" }}} -

Les utilisateurs peuvent désormais se connecter à votre application en visitant Gestionnaire de route /api/auth/login fourni par la trousse SDK. Ajoutez un lien qui pointe vers la route de connexion à l’aide d’une anchor tag (balise d’ancrage). En cliquant sur ce lien, vos utilisateurs seront redirigés vers la page de connexion universelle d’Auth0, où Auth0 pourra les authentifier. Une fois l’authentification réussie, Auth0 redirigera vos utilisateurs vers votre application.

Les prochaines règles de liaison pourraient suggérer d’utiliser le composant Link au lieu d’une balise d’ancrage. Le composant Link est destiné à effectuer des transitions côté client entre les pages. Comme le lien pointe vers une route API et non vers une page, vous devez le conserver en tant que balise d’ancrage.

Next.js - Étape 6 - Point de contrôle

Ajoutez le lien de connexion à votre application.

  • Lorsque vous cliquez dessus, vérifiez que votre application Next.js vous redirige vers la page Connexion universelle Auth0 et que vous pouvez maintenant vous connecter ou vous inscrire en utilisant un nom d’utilisateur et un mot de passe ou un fournisseur social.

  • Une fois l’opération terminée, vérifiez qu’Auth0 vous redirige vers votre application.

+

Les utilisateurs peuvent désormais se connecter à votre application en visitant Gestionnaire de route /api/auth/login fourni par la trousse SDK. Ajoutez un lien qui pointe vers la route de connexion à l’aide d’une balise d’ancrage. En cliquant sur ce lien, vos utilisateurs seront redirigés vers la page de connexion universelle Auth0, où Auth0 pourra les authentifier. Une fois l’authentification réussie, Auth0 redirigera vos utilisateurs vers votre application.

Les prochaines règles de liaison pourraient suggérer d’utiliser le composant Link au lieu d’une balise d’ancrage. Le composant Link est destiné à effectuer des transitions côté client entre les pages. Comme le lien pointe vers une route API et non vers une page, vous devez le conserver en tant que balise d’ancrage.

Next.js - Étape 6 - Point de contrôle

Ajoutez le lien de connexion à votre application.

  • Lorsque vous cliquez dessus, vérifiez que votre application Next.js vous redirige vers la page Connexion universelle Auth0 et que vous pouvez maintenant vous connecter ou vous inscrire en utilisant un nom d’utilisateur et un mot de passe ou un fournisseur social.

  • Une fois l’opération terminée, vérifiez qu’Auth0 vous redirige vers votre application.

-

null

Auth0 active le fournisseur social Google par défaut sur les nouveaux locataires et vous offre des clés de développeur pour tester la connexion avec des fournisseurs d’identité sociale. Toutefois, ces clés de développeur présentent certaines limitations qui peuvent entraîner un comportement différent de votre application. Pour plus de détails sur ce comportement et comment le résoudre, consultez le document Tester les connexions sociales avec des clés de développeur Auth0.

+

null

Auth0 active le fournisseur social Google par défaut sur les nouveaux locataires et vous offre des clés de développeur pour tester la connexion avec des fournisseurs d’identité sociale. Toutefois, ces clés de développeur présentent certaines limitations qui peuvent entraîner un comportement différent de votre application. Pour plus de détails sur ce comportement et comment le résoudre, consultez le document Tester les connexions sociales avec des clés de développeur Auth0.

## Ajouter une fonctionnalité de déconnexion à votre application -

Maintenant que vous pouvez vous connecter à votre application Next.js, vous avez besoin d’un moyen de vous déconnecter. Ajoutez un lien qui pointe vers la route API /api/auth/logout. En cliquant dessus, vous redirigez vos utilisateurs vers votre point de terminaison de déconnexion Auth0 (https://YOUR_DOMAIN/v2/logout), puis vous les redirigez immédiatement vers votre application.

Next.js - Étape 7 - Point de contrôle

Ajoutez le lien de déconnexion à votre application. Lorsque vous cliquez dessus, vérifiez que votre application Next.js vous redirige vers l’adresse que vous avez indiquée comme l’une des « Allowed Logout URLs (URL de déconnexions autorisées) » dans les « Paramètres ».

+

Maintenant que vous pouvez vous connecter à votre application Next.js, vous avez besoin d’un moyen de vous déconnecter. Ajoutez un lien qui pointe vers la route API /api/auth/logout. En cliquant dessus, vous redirigez vos utilisateurs vers votre point de terminaison de déconnexion Auth0 (https://YOUR_DOMAIN/v2/logout), puis vous les redirigez immédiatement vers votre application.

Next.js - Étape 7 - Point de contrôle

Lancez votre application.

  • Vérifiez que votre application Next.js vous redirige vers la page de connexion universelle Auth0 et que vous pouvez désormais vous connecter ou vous inscrire à l’aide d’un nom d’utilisateur et d’un mot de passe ou d’un fournisseur de réseau social.

  • Une fois cette opération terminée, vérifiez qu’Auth0 effectue une redirection vers votre application.

-

Sorry about that. Here's a couple of things to double check:

  • are your environment variables populated correctly?

  • make sure that "Allowed Callback URLs" is configured correctly in your tenant

Still having issues? Check out our documentation or visit our community page to get more help.

+

Nous vous prions de nous excuser pour tout inconvénient causé. Voici quelques éléments à vérifier :

  • vos variables d’environnement sont-elles correctement renseignées?

  • assurez-vous que les URL de rappel autorisées sont correctement configurées dans votre locataire

Vous rencontrez toujours des problèmes? Consultez notre documentation ou la page de notre communauté pour obtenir de l’aide.

diff --git a/fr-ca/articles/quickstart/webapp/nginx-plus/interactive.md b/fr-ca/articles/quickstart/webapp/nginx-plus/interactive.md index 36723e2e95..2e4659ff89 100644 --- a/fr-ca/articles/quickstart/webapp/nginx-plus/interactive.md +++ b/fr-ca/articles/quickstart/webapp/nginx-plus/interactive.md @@ -7,8 +7,6 @@ files: - files/openid_connection_configuration - files/openid_connect - files/frontend -github: - path: https://github.com/nginxinc/nginx-openid-connect locale: fr-CA --- @@ -20,17 +18,17 @@ locale: fr-CA ## Installer et activer le module nginx-plus-module-njs {{{ data-action="code" data-code="nginx.conf" }}} -

Vous devez d’abord installer le module nginx-plus-module-njs pour NGINX Plus.

Suivez le guide d’installation des modules dynamiques pour installer les packages dans votre système d’exploitation hôte.

Pour les distributions Linux qui utilisent le gestionnaire de packages yum, il est possible d’installer le module de la manière suivante :

sudo yum install nginx-plus-module-njs jq

Une fois le module installé, vous devez l’activer pour NGINX en ajoutant la ligne suivante au début de votre fichier /etc/nginx/nginx.conf :

load_module modules/ngx_http_js_module.so;

+

Vous devez d’abord installer le module nginx-plus-module-njs pour NGINX Plus.

Suivez le guide d’installation des modules dynamiques pour installer les packages dans votre système d’exploitation hôte.

Pour les distributions Linux qui utilisent le gestionnaire de packages yum, il est possible d’installer le module de la manière suivante :

sudo yum install nginx-plus-module-njs jq

Une fois le module installé, vous devez l’activer pour NGINX en ajoutant la ligne suivante au début de votre fichier /etc/nginx/nginx.conf :

load_module modules/ngx_http_js_module.so;

-## Vérifier le dépôt de modèles nginx-openid-connect +## Vérifier le référentiel de modèles nginx-openid-connect -

Clonez le dépôt nginx-openid-connect. Ce dépôt est accompagné d’un modèle de configuration.

git clone https://github.com/nginxinc/nginx-openid-connect

+

Clonez le référentiel nginx-openid-connect. Ce référentiel est accompagné d’un modèle de configuration.

git clone https://github.com/nginxinc/nginx-openid-connect

-## Configurer NGINX avec les détails de votre application Auth0 {{{ data-action="code" data-code="openid_connection_configuration.conf" }}} +## Configurez NGINX avec les détails de votre application Auth0 {{{ data-action="code" data-code="openid_connection_configuration.conf" }}} -

Exécutez le script configure.sh dans le dossier nginx-openid-connect pour remplir le modèle de configuration pour votre application Auth0 :

./configure.sh --auth_jwt_key request \
+

Exécutez le script configure.sh dans le dossier nginx-openid-connect pour renseigner le modèle de configuration pour votre application Auth0 :

./configure.sh --auth_jwt_key request \
 
   --client_id ${account.clientId} \
 
@@ -40,14 +38,14 @@ locale: fr-CA
 
 
-

Puis, ajoutez l’URL de déconnexion de votre locataire à votre fichier openid_connect_configuration.conf.

+

Puis, ajoutez l’URL de déconnexion de votre locataire à votre fichier openid_connect_configuration.conf.

## Configuration de l’en-tête Accept-Encoding pour les points de terminaison du jeton et JWKS {{{ data-action="code" data-code="openid_connect.server_conf" }}} -

Ajoutez l’en-tête Accept-Encoding et définissez la valeur gzip dans votre fichier openid_connect.server_conf .

+

Ajoutez l’en-tête Accept-Encoding et définissez la valeur gzip dans votre fichier openid_connect.server_conf.

-## Copier les fichiers de configuration OpenID Connect +## Copier les fichiers de configuration OpenID Connect

Copiez vos quatre fichiers de configuration dans le dossier conf.d.

sudo cp openid_connect.js \ 
@@ -65,7 +63,7 @@ locale: fr-CA
 ## Configuration des paramètres de l’application Auth0
 
 
-

Dans Auth0 Dashboard :

  1. Rendez-vous dans Applications > Applications, puis sélectionnez votre application dans la liste.

  2. Passez à la vue Paramètres .

  3. Dans la section URI de l’application, ajoutez https://{yourDomain}/_codexch aux Callback URL autorisées (.

  4. Passez à la vue Identifiants.

Dans la section Authentification des applications, définissez Méthode d’authentification sur « None ».

+

Dans Auth0 Dashboard :

  1. Accédez à Applications > Applications, puis sélectionnez votre application dans la liste.

  2. Passez à l’affichage Paramètres.

  3. Dans la section  URI de l’application, ajoutez https://{yourDomain}/_codexch à URL de rappel autorisées).

  4. Passez à l’affichage Credentials (Identifiants).

Dans la section Application Authentication (Authentification de l’application), définissez Authentication Method (Méthode d’authentification) sur « None ».

## Transmettre les en-têtes à l’application en amont {{{ data-action="code" data-code="frontend.conf" }}} diff --git a/fr-ca/articles/quickstart/webapp/php/interactive.md b/fr-ca/articles/quickstart/webapp/php/interactive.md index 8779c3c23e..324567024b 100644 --- a/fr-ca/articles/quickstart/webapp/php/interactive.md +++ b/fr-ca/articles/quickstart/webapp/php/interactive.md @@ -10,7 +10,7 @@ files: - files/router - files/callback github: - path: https://github.com/auth0-samples/auth0-php-web-app/tree/main/app + path: app locale: fr-CA --- @@ -19,15 +19,15 @@ locale: fr-CA

Auth0 vous permet d’ajouter rapidement l’authentification à presque tous les types d’application. Ce guide explique comment intégrer Auth0, ajouter l’authentification et afficher les informations de profil utilisateur dans n’importe quelle application PHP à l’aide de la trousse SDK Auth0 PHP.

Pour utiliser ce guide rapide, vous devez :

  • Vous inscrire à un compte Auth0 gratuit ou vous connecter à Auth0.

  • Disposer d’un projet PHP fonctionnel avec lequel vous souhaitez vous intégrer. Vous pouvez également consulter ou télécharger une application faisant office d’exemple lorsque vous vous connectez.

-## Configurer Auth0 +## Configuration d’Auth0 -

Pour utiliser les services Auth0, vous devez avoir une application installée dans Auth0 Dashboard. L’application Auth0 est l’endroit où vous allez configurer le fonctionnement de l’authentification pour le projet que vous développez.

Configurer une application

Utilisez le sélecteur interactif pour créer une nouvelle application Auth0 ou sélectionner une application existante qui représente le projet avec lequel vous souhaitez vous intégrer. Dans Auth0, il est attribué à chaque application un identificateur client unique alphanumérique que votre code d’application utilisera pour appeler les API Auth0 via la trousse SDK.

Tous les paramètres que vous configurez à l’aide de ce guide rapide seront automatiquement mis à jour pour votre application dans le Dashboard, qui vous permettra de gérer vos applications.

Si vous préférez explorer une configuration complète, vous pouvez plutôt consulter une application faisant office d’exemple.

Configuration des Callback URL

Une Callback URL est une URL intégrée dans votre application vers laquelle vous souhaitez qu’Auth0 redirige les utilisateurs après leur authentification. Si elle n’est pas définie, les utilisateurs ne seront pas redirigés vers votre application après s’être connectés.

Si vous suivez notre projet à titre d’exemple, définissez ceci sur http://localhost:3000/callback.

Configuration des URL de déconnexion

Une URL de déconnexion est une URL intégrée dans votre application vers laquelle vous souhaitez qu’Auth0 redirige les utilisateurs après leur déconnexion. Si elle n’est pas définie, les utilisateurs ne pourront pas se déconnecter de votre application et recevront un message d’erreur.

Si vous suivez notre projet à titre d’exemple, définissez ceci sur http://localhost:3000.

Configurer Allowed Web Origins (Origines Web autorisées)

Une origine Web autorisée est une URL que vous souhaitez autoriser à accéder à votre flux d’authentification. Elle doit contenir l’URL de votre projet. Si elle n’est pas configurée adéquatement, votre projet ne pourra pas actualiser silencieusement les jetons d’authentification, ce qui entraînera la déconnexion de vos utilisateurs la prochaine fois qu'ils visiteront votre application ou lors de l’actualisation d’une page.

Si vous suivez notre projet à titre d’exemple, définissez ceci sur http://localhost:3000.

+

Pour utiliser les services Auth0, vous devez avoir une application installée dans Auth0 Dashboard. L’application Auth0 est l’endroit où vous allez configurer le fonctionnement de l’authentification pour le projet que vous développez.

Configurer une application

Utilisez le sélecteur interactif pour créer une nouvelle application Auth0 ou sélectionner une application existante qui représente le projet avec lequel vous souhaitez effectuer l’intégration. Dans Auth0, il est attribué à chaque application un identifiant client unique alphanumérique que votre code d’application utilisera pour appeler les API Auth0 via la trousse SDK.

Tous les paramètres que vous configurez à l’aide de ce guide rapide seront automatiquement mis à jour pour votre application dans le Dashboard, qui est l’endroit où vous pourrez gérer vos applications à l’avenir.

Si vous préférez explorer une configuration complète, consultez plutôt un exemple d’application.

Configurer les URL de rappel

Une URL de rappel est une URL intégrée dans votre application vers laquelle vous souhaitez qu’Auth0 redirige les utilisateurs après leur authentification. Si elle n’est pas définie, les utilisateurs ne seront pas redirigés vers votre application après s’être connectés.

Si vous suivez notre projet à titre d’exemple, définissez ceci sur http://localhost:3000/callback.

Configuration des URL de déconnexion

Une URL de déconnexion est une URL intégrée dans votre application vers laquelle vous souhaitez qu’Auth0 redirige les utilisateurs après leur déconnexion. Si elle n’est pas définie, les utilisateurs ne pourront pas se déconnecter de votre application et recevront un message d’erreur.

Si vous suivez notre projet à titre d’exemple, définissez ceci sur http://localhost:3000.

Configurer les origines Web autorisées

Une origine Web autorisée est une URL que vous souhaitez autoriser à accéder à votre flux d’authentification. Elle doit contenir l’URL de votre projet. Si elle n’est pas configurée adéquatement, votre projet ne pourra pas actualiser silencieusement les jetons d’authentification, ce qui entraînera la déconnexion de vos utilisateurs lorsque prochainement ils visiteront votre application ou lors de l’actualisation d’une page.

Si vous suivez notre projet à titre d’exemple, définissez ceci sur http://localhost:3000.

## Installer la trousse SDK Auth0 PHP {{{ data-action="code" data-code="index.php" }}} -

Auth0 fournit une trousse SDK PHP (Auth0-PHP) pour simplifier le processus de mise en œuvre de l’authentification et de l’autorisation Auth0 dans les applications PHP.

La trousse SDK Auth0 PHP nécessite l’installation des bibliothèques HTTP compatibles PSR-17 et PSR-18 pour la gestion des requêtes réseau. Si vous ne disposez pas de bibliothèques, vous pouvez installer des choix fiables en exécutant les commandes suivantes dans votre terminal :

cd <your-project-directory>
+

Auth0 fournit une trousse SDK PHP (Auth0-PHP) pour simplifier le processus de mise en œuvre de l’authentification et de l’autorisation Auth0 dans les applications PHP.

La trousse SDK Auth0 PHP nécessite l’installation des bibliothèques HTTP compatibles PSR-17 et PSR-18 pour la gestion des requêtes réseau. Si vous ne disposez pas de bibliothèques, vous pouvez installer des choix fiables en exécutant les commandes suivantes dans votre terminal :

cd <your-project-directory>
 
 composer require symfony/http-client nyholm/psr7
 
@@ -37,11 +37,11 @@ composer require symfony/http-client nyholm/psr7
 
 
-

Configurer la trousse SDK Auth0

Créez un nouveau fichier dans votre application, appelé index.php, et copiez le code du panneau interactif à droite sous l’onglet index.php.

Pour que la trousse SDK fonctionne correctement, vous devez définir les propriétés suivantes dans la trousse SDK Auth0 lors de l’initialisation :

  • domain : Le domaine de votre locataire Auth0. En général, vous le trouvez dans Auth0 Dashboard sous vos paramètres d’application dans le champ Domain (Domaine). Si vous utilisez un domaine personnalisé, définissez-le plutôt sur la valeur de votre domaine personnalisé.

  • clientId: L’identificateur de l’application Auth0 que vous avez configurée précédemment dans ce guide rapide. Vous pouvez le trouver dans Auth0 Dashboard, dans la rubrique des paramètres de votre application, dans le champ Client ID (ID client).

  • clientSecret: Le secret de l’application Auth0 que vous avez configurée précédemment dans ce guide rapide. Vous pouvez le trouver dans Auth0 Dashboard, dans la rubrique des paramètres de votre application, dans le champ Client Secret (Secret client).

  • redirectUri: L’URL dans votre application vers laquelle vous souhaitez qu’Auth0 redirige les utilisateurs après leur authentification. Cela correspond à la Callback URL que vous avez configurée précédemment dans ce guide rapide. Vous pouvez également trouver cette valeur dans Auth0 Dashboard, dans la rubrique des paramètres de votre application, dans le champ Callback URLs (Callback URL). Assurez-vous que ce que vous saisissez dans votre code correspond à ce que vous avez configuré précédemment, au cas contraire, vos utilisateurs verront une erreur.

  • cookieSecret: Valeur secrète longue utilisée pour chiffrer le témoin de session. Vous pouvez générer une chaîne appropriée en exécutant openssl rand -hex 32 dans votre terminal.

PHP - Étape 2 - Point de contrôle

Votre trousse SDK Auth0 devrait maintenant être correctement configuré. Exécutez votre application pour vérifier que :

  • La trousse SDK est initialisée correctement.

  • Votre application ne génère aucune erreur liée à Auth0.

+

Configurer la trousse SDK Auth0

Créez un nouveau fichier dans votre application, appelé index.php, et copiez le code du panneau interactif à droite sous l’onglet index.php.

Pour que la trousse SDK fonctionne correctement, vous devez définir les propriétés suivantes dans la trousse SDK Auth0 lors de l’initialisation :

  • domain : Le domaine de votre locataire Auth0. En général, vous le trouvez dans Auth0 Dashboard sous vos paramètres d’application dans le champ Domain (Domaine). Si vous utilisez un domaine personnalisé, définissez-le plutôt sur la valeur de votre domaine personnalisé.

  • clientId : l’identificateur de l’application Auth0 que vous avez configurée précédemment dans ce guide rapide. Vous pouvez le trouver dans Auth0 Dashboard, dans les paramètres de votre application, dans le champ Client ID (ID client).

  • clientSecret : le secret de l’application Auth0 que vous avez configurée précédemment dans ce guide rapide. Vous pouvez le trouver dans Auth0 Dashboard, dans la rubrique des paramètres de votre application, dans le champ Client Secret (Secret client).

  • redirectUri : l’URL dans votre application vers laquelle vous souhaitez qu’Auth0 redirige les utilisateurs après leur authentification. Cela correspond à l’URL de rappel que vous avez configurée précédemment dans ce guide rapide. Cette valeur se trouve également dans Auth0 Dashboard, sous les paramètres de votre application, dans le champ URL de rappel. Assurez-vous que ce que vous saisissez dans votre code correspond à ce que vous avez configuré précédemment, au cas contraire, vos utilisateurs verront une erreur.

  • cookieSecret : Valeur secrète longue utilisée pour chiffrer le témoin de session. Vous pouvez générer une chaîne appropriée en exécutant openssl rand -hex 32 dans votre terminal.

PHP - Étape 2 - Point de contrôle

Votre trousse SDK Auth0 devrait maintenant être correctement configurée. Exécutez votre application pour vérifier que :

  • La trousse SDK s’initialise correctement.

  • Votre application ne génère aucune erreur liée à Auth0.

-
+

Nous vous prions de nous excuser pour tout inconvénient causé. Voici quelques éléments à vérifier :

  • Assurez-vous que la bonne application est sélectionnée.

  • Avez-vous procédé à un enregistrement après avoir saisi vos URL?

  • Assurez-vous que le domaine et l'identifiant client ont été importés correctement.

Vous rencontrez toujours des problèmes? Consultez notre documentation ou la page de notre communauté pour obtenir de l'aide.

@@ -57,32 +57,32 @@ composer require symfony/http-client nyholm/psr7 ## Ajouter une fonctionnalité de connexion à votre application {{{ data-action="code" data-code="login.php" }}} -

À présent que vous avez configuré votre application Auth0 et la trousse SDK PHP Auth0, vous devez configurer la connexion pour votre projet. Pour ce faire, vous utiliserez la méthode login() de la trousse SDK pour créer un bouton de connexion qui redirige les utilisateurs vers la page de connexion universelle Auth0. Une fois un utilisateur authentifié avec succès, il est redirigé vers la Callback URL que vous avez configurée précédemment dans ce guide rapide.

Créez un nouveau fichier dans votre application, appelé login.php, pour gérer le processus de connexion, et copiez le code du panneau interactif à droite, qui contient la logique nécessaire à la connexion.

PHP - Étape 4 - Point de contrôle

Vous devez désormais pouvoir vous connecter ou vous inscrire en utilisant un nom d’utilisateur et un mot de passe.

Cliquez sur le lien de connexion et vérifiez que :

  • Votre application vous redirige vers la page Connexion universelle Auth0.

  • Vous pouvez vous connecter ou vous inscrire.

  • Auth0 vous redirige vers votre application en utilisant la valeur de redirectUri que vous avez utilisée pour configurer la trousse SDK.

+

À présent que vous avez configuré votre application Auth0 et la trousse SDK PHP Auth0, vous devez configurer la connexion pour votre projet. Pour ce faire, vous utiliserez la méthode login() de la trousse SDK pour créer un bouton de connexion qui redirige les utilisateurs vers la page de connexion universelle Auth0. Une fois un utilisateur authentifié avec succès, il est redirigé vers l’URL de rappel que vous avez configurée précédemment dans ce guide de démarrage rapide.

Créez un nouveau fichier dans votre application, appelé login.php, pour gérer le processus de connexion, et copiez le code du panneau interactif à droite, qui contient la logique nécessaire à la connexion.

PHP – Étape 4 – Point de contrôle

Vous devez désormais pouvoir vous connecter ou vous inscrire en utilisant un nom d’utilisateur et un mot de passe.

Cliquez sur le lien de connexion et vérifiez que :

  • Votre application vous redirige vers la page de connexion universelle Auth0.

  • Vous pouvez vous connecter ou vous inscrire.

  • Auth0 vous redirige vers votre application en utilisant la valeur de redirectUri que vous avez utilisée pour configurer la trousse SDK.

-

Sorry about that. Here's a couple things to double check:

  • You configured the correct redirectUri.

Still having issues? Check out our documentation or visit our community page to get more help.

+

Nous vous prions de nous excuser pour tout inconvénient causé. Voici quelques éléments à vérifier :

  • Vous avez configuré le bon redirectUri.

Vous rencontrez toujours des problèmes? Consultez notre documentation ou la page de notre communauté pour obtenir de l’aide.

## Ajouter une fonctionnalité de déconnexion à votre application {{{ data-action="code" data-code="logout.php" }}} -

Les utilisateurs qui se connectent à votre projet auront également besoin d’un moyen de se déconnecter. Nous allons gérer un bouton de déconnexion à l’aide de la méthode logout() de la trousse SDK. Lorsque les utilisateurs se déconnecteront, ils seront redirigés vers votre point de terminaison Auth0 logout qui par la suite les redirigera immédiatement vers l’URL de déconnexion que vous avez configurée précédemment dans ce guide rapide.

Créez un nouveau fichier dans votre application, appelé logout.php, pour gérer le processus, et copiez le code du panneau interactif, qui contient la logique nécessaire à la déconnexion. Ensuite, mettez à jour votre fichier index.php pour y intégrer le nouveau bouton de déconnexion.

PHP - Section 5 - Point de contrôle

Exécutez votre application et cliquez sur le bouton de déconnexion, vérifiez que :

  • Votre application vous redirige vers l’adresse que vous avez spécifiée comme l’une des URL de déconnexion autorisées dans les paramètres de votre application.

  • Vous n’êtes plus connecté à votre application.

+

Les utilisateurs qui se connectent à votre projet auront également besoin d’un moyen de se déconnecter. Nous allons gérer un bouton de déconnexion à l’aide de la méthodelogout() de la trousse SDK. Lorsque les utilisateurs se déconnecteront, ils seront redirigés vers votre point de terminaison Auth0 logout qui par la suite les redirigera immédiatement vers l’URL de déconnexion que vous avez configurée précédemment dans ce guide de démarrage rapide.

Créez un nouveau fichier dans votre application, appelé logout.php, pour gérer le processus, et copiez le code du panneau interactif, qui contient la logique nécessaire à la déconnexion. Ensuite, mettez à jour votre fichier index.php pour y intégrer le nouveau bouton de déconnexion.

PHP - Section 5 - Point de contrôle

Exécutez votre application et cliquez sur le bouton de déconnexion, vérifiez que :

  • Votre application vous redirige vers l’adresse que vous avez précisée comme l’une des URL de déconnexion autorisées dans les paramètres de votre application.

  • Vous n’êtes plus connecté à votre application.

-

Sorry about that. Here's a couple things to double check:

  • You configured the correct Logout URL.

Still having issues? Check out our documentation or visit our community page to get more help.

+

Nous vous prions de nous excuser pour tout inconvénient causé. Voici quelques éléments à vérifier :

  • Vous avez configuré l’a bonne URL de déconnexion.

Vous rencontrez toujours des problèmes? Consultez notre documentation ou la page de notre communauté pour obtenir de l’aide.

## Afficher les informations du profil utilisateur {{{ data-action="code" data-code="profile.php" }}} -

Vu que vos utilisateurs peuvent désormais se connecter et se déconnecter, vous voudrez probablement pouvoir récupérer les informations de profil associées aux utilisateurs authentifiés. Par exemple, vous voudrez peut-être pouvoir afficher le nom ou la photo de profil d’un utilisateur connecté dans votre projet.

Le SDK PHP Auth0 fournit des informations sur les utilisateurs via la méthode getCredentials(). Examinez le code profile.php dans le panneau interactif pour voir un exemple de la façon de l’utiliser.

Étant donné que la méthode contient des informations sensibles liées à l’identité de l’utilisateur, sa disponibilité dépend du statut d’authentification de l’utilisateur. Pour éviter les erreurs de rendu, vous devez toujours vérifier si la méthode getCredentials() renvoie un object ou null pour déterminer si Auth0 a authentifié l’utilisateur avant que votre application ne consomme les résultats.

PHP - Étape 6 - Point de contrôle

Verifiez que :

  • vous pouvez afficher le nickname ou toute autre propriété de l’utilisateur adéquatement, après vous être connecté.

+

Vu que vos utilisateurs peuvent désormais se connecter et se déconnecter, vous voudrez probablement pouvoir récupérer les informations de profil associées aux utilisateurs authentifiés. Par exemple, vous voudrez peut-être pouvoir afficher le nom ou la photo de profil d’un utilisateur connecté dans votre projet.

La trousse SDK PHP Auth0 fournit des informations sur les utilisateurs via la méthode getCredentials(). Examinez le code profile.php dans le panneau interactif pour voir un exemple de la façon de l’utiliser.

Étant donné que la méthode contient des informations sensibles liées à l’identité de l’utilisateur, sa disponibilité dépend du statut d’authentification de l’utilisateur. Pour éviter les erreurs de rendu, vous devez toujours vérifier si la méthode getCredentials() renvoie un object ou null pour déterminer si Auth0 a authentifié l’utilisateur avant que votre application ne consomme les résultats.

PHP - Étape 6 - Point de contrôle

Vérifiez que :

  • vous pouvez afficher le nickname ou toute autre propriété de l’utilisateur adéquatement, après vous être connecté.

-

Sorry about that. Here's a couple things to double check:

  • You created the profile.php file and are logged in.

Still having issues? Check out our documentation or visit our community page to get more help.

+

Nous vous prions de nous excuser pour tout inconvénient causé. Voici quelques éléments à vérifier :

  • Vous avez créé le fichier profile.php et êtes connecté.

Vous rencontrez toujours des problèmes? Consultez notre documentation ou la page de notre communauté pour obtenir de l’aide.

diff --git a/fr-ca/articles/quickstart/webapp/python/interactive.md b/fr-ca/articles/quickstart/webapp/python/interactive.md index c752c240a6..2cfe2b9d31 100644 --- a/fr-ca/articles/quickstart/webapp/python/interactive.md +++ b/fr-ca/articles/quickstart/webapp/python/interactive.md @@ -1,24 +1,24 @@ --- -title: Ajouter une fonctionnalité de connexion à votre application Python Flask -description: Ce guide explique comment intégrer Auth0 à une application Python Flask, à l’aide de la trousse SDK Authlib. +title: Ajouter une fonctionnalité de connexion à votre application Python Flask +description: Ce guide explique comment intégrer Auth0 à une application PythonºFlask, à l’aide de la trousse SDK Authlib. interactive: true files: - files/server - files/templates/home github: - path: https://github.com/auth0-samples/auth0-python-web-app/tree/master/01-Login + path: 01-Login locale: fr-CA --- -# Ajouter une fonctionnalité de connexion à votre application Python Flask +# Ajouter une fonctionnalité de connexion à votre application Python Flask -

Auth0 vous permet d’ajouter l’authentification et de pouvoir accéder aux informations relatives au profil de l’utilisateur dans votre application. Ce guide explique comment intégrer Auth0 à une application Python Flask, à l’aide de la trousse SDK Authlib.

+

Auth0 vous permet d’ajouter l’authentification et de pouvoir accéder aux informations relatives au profil de l’utilisateur dans votre application. Ce guide explique comment intégrer Auth0 à une application Python Flask, à l’aide de la trousse SDK Authlib.

-## Configurer Auth0 +## Configuration d’Auth0 -

Pour utiliser les services Auth0, vous devez avoir une application installée dans Auth0 Dashboard. L’application Auth0 est l’endroit où vous allez configurer le fonctionnement de l’authentification pour le projet que vous développez.

Configurer une application

Utilisez le sélecteur interactif pour créer une nouvelle application Auth0 ou sélectionner une application existante qui représente le projet avec lequel vous souhaitez vous intégrer. Dans Auth0, il est attribué à chaque application un identificateur client unique alphanumérique que votre code d’application utilisera pour appeler les API Auth0 via la trousse SDK.

Tous les paramètres que vous configurez à l’aide de ce guide rapide seront automatiquement mis à jour pour votre application dans le Dashboard, qui vous permettra de gérer vos applications.

Si vous préférez explorer une configuration complète, vous pouvez plutôt consulter une application faisant office d’exemple.

Configuration des Callback URL

Une Callback URL est une URL intégrée dans votre application vers laquelle vous souhaitez qu’Auth0 redirige les utilisateurs après leur authentification. Si elle n’est pas définie, les utilisateurs ne seront pas redirigés vers votre application après s’être connectés.

Si vous suivez notre projet à titre d’exemple, définissez ceci sur http://localhost:3000/callback.

Configuration des URL de déconnexion

Une URL de déconnexion est une URL intégrée dans votre application vers laquelle vous souhaitez qu’Auth0 redirige les utilisateurs après leur déconnexion. Si elle n’est pas définie, les utilisateurs ne pourront pas se déconnecter de votre application et recevront un message d’erreur.

Si vous suivez notre projet à titre d’exemple, définissez ceci sur http://localhost:3000.

+

Pour utiliser les services Auth0, vous devez avoir une application installée dans Auth0 Dashboard. L’application Auth0 est l’endroit où vous allez configurer le fonctionnement de l’authentification pour le projet que vous développez.

Configurer une application

Utilisez le sélecteur interactif pour créer une nouvelle application Auth0 ou sélectionner une application existante qui représente le projet avec lequel vous souhaitez effectuer l’intégration. Dans Auth0, chaque application se voit attribuer un identifiant client unique alphanumérique que votre code d’application utilisera pour appeler les API Auth0 via la trousse SDK.

Tous les paramètres que vous configurez à l’aide de ce guide de démarrage rapide seront automatiquement mis à jour pour votre application dans le Tableau de bord, qui est l’endroit où vous pourrez gérer vos applications à l’avenir.

Si vous préférez explorer une configuration complète, consultez plutôt un exemple d’application.

Configurer les URL de rappel

Une URL de rappel est une URL intégrée dans votre application vers laquelle vous souhaitez qu’Auth0 redirige les utilisateurs après leur authentification. Si elle n’est pas définie, les utilisateurs ne seront pas redirigés vers votre application après s’être connectés.

Si vous suivez notre projet à titre d’exemple, définissez ceci sur http://localhost:3000/callback.

Configuration des URL de déconnexion

Une URL de déconnexion est une URL intégrée dans votre application vers laquelle vous souhaitez qu’Auth0 redirige les utilisateurs après leur déconnexion. Si elle n’est pas définie, les utilisateurs ne pourront pas se déconnecter de votre application et recevront un message d’erreur.

Si vous suivez notre projet à titre d’exemple, définissez ceci sur http://localhost:3000.

## Installer les dépendances @@ -43,10 +43,10 @@ requests>=2.27.1

-## Configurez votre fichier .env +## Configurez votre fichier .env -

Ensuite, créez un fichier .env dans votre répertoire de projet. Ce fichier contiendra les clés de vos clients et d’autres détails de configuration.

# 📁 .env -----
+

Ensuite, créez un fichier .env dans votre répertoire de projet. Ce fichier contiendra les clés de vos clients et d’autres détails de configuration.

# 📁 .env -----
 
 
 
@@ -60,22 +60,22 @@ APP_SECRET_KEY=
 
 
-

  • Générez une chaîne pour APP_SECRET_KEY en utilisant openssl rand -hex 32 depuis votre shell.

+

  • Générez une chaîne pour APP_SECRET_KEY en utilisant openssl rand -hex 32 depuis votre shell.

## Configurez votre application {{{ data-action="code" data-code="templates/home.html" }}} -

Ensuite, configurez votre application. Créez un fichier server.py dans le répertoire de votre projet; ce fichier contiendra la logique de votre application.

Importez toutes les bibliothèques nécessaires à votre application.

Chargez le fichier de configuration .env que vous avez créé à l’étape précédente.

Configurez Authlib pour gérer l’authentification de votre application avec Auth0. Apprenez-en davantage sur les options de configuration possibles pour la méthode register() d’Authlib OAuth dans leur documentation

+

Ensuite, configurez votre application. Créez un fichier server.py dans le répertoire de votre projet; ce fichier contiendra la logique de votre application.

Importez toutes les bibliothèques nécessaires à votre application.

Chargez le fichier de configuration .env que vous avez créé à l’étape précédente.

Configurez Authlib pour gérer l’authentification de votre application avec Auth0. Apprenez-en davantage sur les options de configuration possibles pour la méthode register() d’Authlib OAuth dans leur documentation.

## Configurez vos routes {{{ data-action="code" data-code="server.py" }}} -

Dans cet exemple, vous ajouterez quatre routes à l’application : connexion, callback, déconnexion et accueil.

Lorsque les visiteurs de votre application se rendent sur la route /login, votre application les dirige vers la page de connexion Auth0.

Une fois vos utilisateurs connectés avec Auth0, votre application les dirige vers la route /callback. Cette route enregistre la session de l’utilisateur et permet de ne plus avoir à se reconnecter lorsqu’il revient.

La route /logout permet aux utilisateurs de se déconnecter de votre application. Cette route efface la session de l’utilisateur dans votre application et redirige vers le point de terminaison de déconnexion d’Auth0 pour s’assurer que la session n’est plus enregistrée. Ensuite, l’application redirige l’utilisateur vers votre route d’accueil.

Votre route home / affiche les détails d’un utilisateur authentifié ou permet aux visiteurs de s’identifier.

+

Dans cet exemple, vous ajouterez quatre routes à l’application : connexion, callback, déconnexion et accueil.

Lorsque les visiteurs de votre application se rendent sur la route /login, votre application les dirige vers la page de connexion Auth0.

Une fois vos utilisateurs connectés avec Auth0, votre application les dirige vers la route /callback. Cette route enregistre la session de l’utilisateur et permet de ne plus avoir à se reconnecter lorsqu’il revient.

La route /logout permet aux utilisateurs de se déconnecter de votre application. Cette route efface la session de l’utilisateur dans votre application et redirige vers le point de terminaison de déconnexion d’Auth0 pour s’assurer que la session n’est plus enregistrée. Ensuite, l’application redirige l’utilisateur vers votre route d’accueil.

Votre route /home affiche les détails d’un utilisateur authentifié ou permet aux visiteurs de s’identifier.

## Ajouter des modèles -

Créez ensuite le fichier de modèle utilisé dans la route d’accueil (lors des appels à render_template()).

Créez un nouveau sous-répertoire dans le dossier de votre projet, nommé templates, et créez home.html dans ce répertoire. Collez le contenu à droite dans ce fichier.

+

Créez ensuite le fichier de modèle utilisé dans la route d’accueil (lors des appels render_template()).

Créez un nouveau sous-répertoire dans le dossier de votre projet, nommé templates, et créez home.html dans ce répertoire. Collez le contenu à droite dans ce fichier.

## Exécuter votre application @@ -84,10 +84,10 @@ APP_SECRET_KEY=
-

Python - Étape 7 - Point de contrôle

Visitez http://localhost:3000 pour des raisons de vérification. Vous devez trouver un bouton de connexion redirigeant vers Auth0 pour vous connecter, puis revenir à votre application pour voir vos informations de profil.

+

Python - Étape 7 - Point de contrôle

Visitez http://localhost:3000 pour des raisons de vérification. Un bouton de connexion devrait vous permettre de vous connecter à Auth0, puis de revenir à votre application pour consulter les informations relatives à votre profil.

-

If your application did not start successfully:

  • Verify any errors in the console.

  • Verify the domain and Client ID imported correctly.

  • Verify your tenant configuration.

Still having issues? Check out our documentation or visit our community page to get more help

+

Si votre application n’a pas démarré avec succès :

  • Vérifiez les erreurs éventuelles dans la console.

  • Vérifiez que le domaine et l’identifiant client ont été importés correctement.

  • Vérifiez la configuration de votre locataire.

Vous rencontrez toujours des problèmes? Consultez notre documentation ou la page de notre communauté pour obtenir de l’aide.

diff --git a/fr-ca/articles/quickstart/webapp/rails/interactive.md b/fr-ca/articles/quickstart/webapp/rails/interactive.md index 645cddeeb2..16d78539fe 100644 --- a/fr-ca/articles/quickstart/webapp/rails/interactive.md +++ b/fr-ca/articles/quickstart/webapp/rails/interactive.md @@ -9,7 +9,7 @@ files: - files/routes - files/secured github: - path: https://github.com/auth0-samples/auth0-rubyonrails-sample/tree/master/sample + path: sample locale: fr-CA --- @@ -18,69 +18,69 @@ locale: fr-CA

-## Configurer Auth0 +## Configuration d’Auth0 -

Pour utiliser les services Auth0, vous devez avoir une application installée dans Auth0 Dashboard. L’application Auth0 est l’endroit où vous allez configurer le fonctionnement de l’authentification pour le projet que vous développez.

Configurer une application

Utilisez le sélecteur interactif pour créer une nouvelle application Auth0 ou sélectionner une application existante qui représente le projet avec lequel vous souhaitez effectuer l’intégration. Dans Auth0, il est attribué à chaque application un identifiant client unique alphanumérique que votre code d’application utilisera pour appeler les API Auth0 via la trousse SDK.

Tous les paramètres que vous configurez à l’aide de ce guide rapide seront automatiquement mis à jour pour votre application dans le Dashboard, qui est l’endroit où vous pourrez gérer vos applications à l’avenir.

Si vous préférez explorer une configuration complète, vous pouvez plutôt consulter une application faisant office d’exemple.

Configuration des Callback URL

Une callback URL est une URL intégrée dans votre application vers laquelle vous souhaitez qu’Auth0 redirige les utilisateurs après leur authentification. Si elle n’est pas définie, les utilisateurs ne seront pas redirigés vers votre application après s’être connectés.

Si vous suivez notre exemple de projet, définissez cette URL comme suit : http://localhost:3000/auth/auth0/callback.

Configurer les URL de déconnexion

Une URL de déconnexion est une URL intégrée dans votre application vers laquelle vous souhaitez qu’Auth0 redirige les utilisateurs après qu’ils se sont déconnectés. Si elle n’est pas définie, les utilisateurs ne pourront pas se déconnecter de votre application et recevront un message d’erreur.

Si vous suivez notre exemple de projet, définissez cette URL comme suit : http://localhost:3000.

Configurer les origines Web autorisées

Une origine Web autorisée est une URL que vous souhaitez autoriser à accéder à votre flux d’authentification. Elle doit contenir l’URL de votre projet. Si elle n’est pas configurée adéquatement, votre projet ne pourra pas rafraîchir silencieusement les jetons d’authentification, ce qui entraînera la déconnexion de vos utilisateurs lorsque prochainement ils visiteront votre application ou lors de l’actualisation d’une page.

Si vous suivez notre exemple de projet, définissez cette URL comme suit : http://localhost:3000.

+

Pour utiliser les services Auth0, vous devez avoir une application installée dans Auth0 Dashboard. L’application Auth0 est l’endroit où vous allez configurer le fonctionnement de l’authentification pour le projet que vous développez.

Configurer une application

Utilisez le sélecteur interactif pour créer une nouvelle application Auth0 ou sélectionner une application existante qui représente le projet avec lequel vous souhaitez effectuer l’intégration. Dans Auth0, il est attribué à chaque application un identifiant client unique alphanumérique que votre code d’application utilisera pour appeler les API Auth0 via la trousse SDK.

Tous les paramètres que vous configurez à l’aide de ce guide rapide seront automatiquement mis à jour pour votre application dans le Dashboard, qui est l’endroit où vous pourrez gérer vos applications à l’avenir.

Si vous préférez explorer une configuration complète, consultez plutôt un exemple d’application.

Configurer les URL de rappel

Une URL de rappel est une URL intégrée dans votre application vers laquelle vous souhaitez qu’Auth0 redirige les utilisateurs après leur authentification. Si elle n’est pas définie, les utilisateurs ne seront pas redirigés vers votre application après s’être connectés.

Si vous suivez notre exemple de projet, définissez cette URL comme suit : http://localhost:3000/auth/auth0/callback.

Configuration des URL de déconnexion

Une URL de déconnexion est une URL intégrée dans votre application vers laquelle vous souhaitez qu’Auth0 redirige les utilisateurs après leur déconnexion. Si elle n’est pas définie, les utilisateurs ne pourront pas se déconnecter de votre application et recevront un message d’erreur.

Si vous suivez notre exemple de projet, définissez cette URL comme suit : http://localhost:3000.

Configurer les origines Web autorisées

Une origine Web autorisée est une URL que vous souhaitez autoriser à accéder à votre flux d’authentification. Elle doit contenir l’URL de votre projet. Si elle n’est pas configurée adéquatement, votre projet ne pourra pas actualiser silencieusement les jetons d’authentification, ce qui entraînera la déconnexion de vos utilisateurs lorsque prochainement ils visiteront votre application ou lors de l’actualisation d’une page.

Si vous suivez notre exemple de projet, définissez cette URL comme suit : http://localhost:3000.

## Ajouter des dépendances -

Utilisez omniauth-auth0, une stratégie OmniAuth personnalisée, pour gérer le flux d’authentification.

Ajoutez les dépendances suivantes à votre Gemfile :

gem 'omniauth-auth0', '~> 3.0'
+

Utilisez omniauth-auth0, une stratégie OmniAuth personnalisée, pour gérer le flux d’authentification.

Ajoutez les dépendances suivantes à votre Gemfile :

gem 'omniauth-auth0', '~> 3.0'
 
 gem 'omniauth-rails_csrf_protection', '~> 1.0' # prevents forged authentication requests
 
 
-

Une fois vos GEMS ajoutés, installez-les avec la commande bundle install.

+

Une fois vos gems ajoutés, installez-les avec la commande bundle install.

-## Configurer la trousse SDK {{{ data-action="code" data-code="config/auth0.yml" }}} +## Configuration de la trousse SDK {{{ data-action="code" data-code="config/auth0.yml" }}} -

Créez un fichier de configuration ./config/auth0.yml pour préciser votre domaine Auth0, votre ID client et vos valeurs de secret client situées dans votre Auth0 Dashboard sous les paramètres de l’application.

+

Créez un fichier de configuration ./config/auth0.yml pour préciser votre domaine Auth0, votre identifiant client et vos valeurs de secret client situées dans votre Auth0 Dashboard sous les paramètres de l’application.

## Configurer l’intergiciel OmniAuth {{{ data-action="code" data-code="auth0.rb" }}} -

Créez le fichier d’initialisation suivant ./config/initializers/auth0.rb et configurez l’intergiciel OmniAuth avec le fichier de configuration que vous avez créé à l’étape précédente.

Assurez-vous que callback_path correspond à la valeur donnée dans le paramètre des « callback URL authorisées » de votre application Auth0.

+

Créez le fichier d’initialisation suivant ./config/initializers/auth0.rb et configurez l’intergiciel OmniAuth avec le fichier de configuration que vous avez créé à l’étape précédente.

Assurez-vous que callback_path correspond à la valeur donnée dans le paramètre des URL de rappel autorisées de votre application Auth0.

## Ajouter un contrôleur Auth0 {{{ data-action="code" data-code="auth0_controller.rb" }}} -

Créez un contrôleur Auth0 pour gérer le rappel d’authentification, l’action logout et les méthodes pour construire l’URL de déconnexion.

Exécutez la commande : rails generate controller auth0 callback failure logout --skip-assets --skip-helper --skip-routes --skip-template-engine.

Dans la méthode de rappel, assignez le hash des informations utilisateur, renvoyé en tant que request.env['omniauth.auth'], à la session active.

Pour configurer la déconnexion, effacez tous les objets stockés dans la session en appelant la méthode reset_session dans l’action logout. Ensuite, redirigez vers le point de terminaison de déconnexion Auth0. Pour en savoir plus sur reset_session, consultez Documentation sur le contrôleur d’action Ruby on Rails.

+

Créez un contrôleur Auth0 pour gérer le rappel d’authentification, l’action logout et les méthodes pour créer l’URL de déconnexion.

Exécutez la commande rails generate controller auth0 callback failure logout --skip-assets --skip-helper --skip-routes --skip-template-engine.

Dans la méthode de rappel, assignez le hachage des informations utilisateur, renvoyé en tant que request.env[’omniauth.auth’] à la session active.

Pour configurer la déconnexion, effacez tous les objets stockés dans la session en appelant la méthode reset_session dans l’action logout. Ensuite, redirigez vers le point de terminaison de déconnexion Auth0. Pour en savoir plus sur reset_session, consultez Documentation relative au ActionController Ruby on Rails.

## Configurer les routes {{{ data-action="code" data-code="routes.rb" }}} -

Ajoutez ces routes à votre fichier ./config/routes.rb.

Les routes doivent être en place afin que Rails sache comment diriger les différentes callback URL Auth0 vers le contrôleur Auth0 que vous avez créé à l’étape précédente.

Démarrage rapide Ruby on Rails – Étape 6 – Point de contrôle

Exécutez votre application pour vérifier qu’elle fonctionne toujours comme prévu et que vous ne recevez aucun message d’erreur lié à Auth0.

+

Ajoutez ces routes à votre fichier ./config/routes.rb.

Les routes doivent être en place afin que Rails sache comment diriger les différentes URL de rappel Auth0 vers le contrôleur Auth0 que vous avez créé à l’étape précédente.

Démarrage rapide Ruby on Rails - Étape 6 - Point de contrôle

Exécutez votre application pour vérifier qu’elle fonctionne toujours comme prévu et que vous ne recevez aucun message d’erreur lié à Auth0.

-

Sorry about that. Please double-check that the previous steps completed without error.

Still having issues? Check out our documentation or visit our community page to get more help.

+

Nous vous prions de nous excuser pour tout inconvénient causé. Veuillez vérifier que les étapes précédentes se sont déroulées sans erreur.

Vous rencontrez toujours des problèmes? Consultez notre documentation ou la page de notre communauté pour obtenir de l’aide.

## Ajouter une fonctionnalité de connexion à votre application -

Un utilisateur peut maintenant se connecter à votre application en visitant le point de terminaison /auth/auth0.

Pour prévenir les requêtes d’authentification falsifiées, utilisez les méthodes d’assistance link_to ou button_to avec la méthode :post.

<!-- Place a login button anywhere on your application -->
+

Un utilisateur peut maintenant se connecter à votre application en visitant le point de terminaison /auth/auth0.

Pour prévenir les requêtes d’authentification falsifiées, utilisez les méthodes d’assistance link_to ou button_to avec la méthode :post.

<!-- Place a login button anywhere on your application -->
 
 \${ "<\%= button_to 'Login', '/auth/auth0', method: :post %>" }
 
 
-

Démarrage rapide Ruby on Rails – Étape 7 – Point de contrôle

Ajoutez un bouton à votre application qui redirige l’utilisateur vers le point de terminaison /auth/auth0 lorsqu’il est sélectionné. Observez si vous êtes redirigé vers Auth0 pour vous connecter, puis, renvoyé vers votre application après une authentification réussie.

+

Démarrage rapide Ruby on Rails - Étape 7 - Point de contrôle

Ajoutez un bouton à votre application qui redirige l’utilisateur vers le point de terminaison /auth/auth0 lorsqu’il est sélectionné. Observez si vous êtes redirigé vers Auth0 pour vous connecter, puis renvoyé vers votre application après une authentification réussie.

-

Sorry about that. Here are a couple of things you can check:

  • Ensure that the correct URLs have been set in your Auth0 application as per the first step in this quickstart

  • Check that all the required gems installed correctly

  • Check that the routes have been set up and the Auth0 configuration has been set up in your app

  • Check the logs for any other errors or messages that may have prevented login from working

Still having issues? Check out our documentation or visit our community page to get more help.

+

Nous vous prions de nous excuser pour tout inconvénient causé. Voici quelques éléments à vérifier :

  • Assurez-vous que les bonnes URL ont été définies dans votre application Auth0 conformément à la première étape de ce démarrage rapide

  • Vérifiez que toutes les gems requis sont correctement installés

  • Vérifiez que les routes ont été configurées et que la configuration Auth0 a été définie dans votre application

  • Consultez les journaux pour y trouver d’autres erreurs ou messages qui auraient pu empêcher la connexion de fonctionner

Vous rencontrez toujours des problèmes? Consultez notre documentation ou la page de notre communauté pour obtenir de l’aide.

-## Ajouter une fonctionnalité de déconnexion à votre application +## Ajoutez une fonctionnalité de déconnexion à votre application -

Maintenant que vous pouvez vous connecter à votre application Rails, vous avez besoin d’un moyen de vous déconnecter. Déconnectez un utilisateur en le redirigeant vers l’action auth/logout qui le redirige vers le point de terminaison de déconnexion d’Auth0.

Pour tester cela après l’étape précédente, vous devez peut-être effacer votre session, puis rediriger l’utilisateur vers le point de terminaison de déconnexion d’Auth0.

<!-- Place a logout button anywhere on your application -->
+

Maintenant que vous pouvez vous connecter à votre application Rails, vous avez besoin d’un moyen de vous déconnecter. Déconnectez un utilisateur en le redirigeant vers l’action auth/logout qui le redirige vers le point de terminaison de déconnexion d’Auth0.

Pour tester cela après l’étape précédente, vous devez peut-être effacer votre session, puis rediriger l’utilisateur vers le point de terminaison de déconnexion d’Auth0.

<!-- Place a logout button anywhere on your application -->
 
 \${"<%= button_to 'Logout', 'auth/logout', method: :get %>"}
 
@@ -90,14 +90,14 @@ gem 'omniauth-rails_csrf_protection', '~> 1.0' # prevents forged authenticati
 
   
-

Sorry about that. Here are a couple of things you can check:

  • Ensure that the correct URLs have been set in your Auth0 client as per the first step in this quickstart

  • Check that the routes have been set up and the Auth0 configuration has been set up in your app

  • Check the logs for any other errors or messages that may have prevented login from working

Still having issues? Check out our documentation or visit our community page to get more help.

+

Nous vous prions de nous excuser pour tout inconvénient causé. Voici quelques éléments à vérifier :

  • Assurez-vous que les bonnes URL ont été définies dans votre client Auth0 conformément à la première étape de ce démarrage rapide

  • Vérifiez que les routes ont été configurées et que la configuration Auth0 a été définie dans votre application

  • Consultez les journaux pour toute autre erreur ou message qui aurait pu empêcher la connexion

Vous rencontrez toujours des problèmes? Consultez notre documentation ou la page de notre communauté pour obtenir de l’aide.

## Afficher les informations du profil utilisateur {{{ data-action="code" data-code="routes.rb" }}} -

Pour afficher le profil utilisateur, votre application doit fournir une route protégée. Vous pouvez utiliser unConcern pour contrôler l’accès aux routes qui peuvent être partagées entre plusieurs contrôleurs. Le concern devrait rediriger automatiquement vers Auth0 lorsque l’utilisateur n’est pas authentifié. Au cas contraire, le concern devrait renvoyer le profil utilisateur actuel.

Une fois que vous avez un concern, incluez-le dans tout contrôleur qui nécessite un utilisateur connecté. Vous pouvez ensuite accéder à l’utilisateur à partir de la session session[:userinfo] comme dans l’exemple suivant :

class DashboardController < ApplicationController
+

Pour afficher le profil utilisateur, votre application doit fournir une route protégée. Vous pouvez utiliser une préoccupation pour contrôler l’accès aux routes qui peuvent être partagées entre plusieurs contrôleurs. La préoccupation devrait rediriger automatiquement vers Auth0 lorsque l’utilisateur n’est pas authentifié. Au cas contraire, la préoccupation devrait renvoyer le profil utilisateur actuel.

Une fois que vous avez une préoccupation, incluez-la dans tout contrôleur qui nécessite un utilisateur connecté. Vous pouvez ensuite accéder à l’utilisateur à partir de la session session[:userinfo] comme dans l’exemple suivant :

class DashboardController < ApplicationController
 
   include Secured
 
@@ -113,7 +113,7 @@ end
 
 
-

Une fois que l’utilisateur a chargé la session, utilisez-la pour afficher des informations dans votre développement Web frontal :

<div>
+

Une fois que l’utilisateur a chargé la session, utilisez-la pour afficher des informations dans votre système frontal :

<div>
 
   <p>Normalized User Profile:\${"<%= JSON.pretty_generate(@user[:info])%>"}</p>
 
diff --git a/ja-jp/articles/quickstart/backend/acul/interactive.md b/ja-jp/articles/quickstart/backend/acul/interactive.md
index 4be654ab19..5cfcdd045e 100644
--- a/ja-jp/articles/quickstart/backend/acul/interactive.md
+++ b/ja-jp/articles/quickstart/backend/acul/interactive.md
@@ -7,7 +7,7 @@ files:
  - files/auth_config
  - files/index
 github:
-  path: https://github.com/auth0-samples/auth0-react-samples/tree/master/Sample-01
+  path: Sample-01
 locale: ja-JP
 ---
 
@@ -19,12 +19,12 @@ locale: ja-JP
 ## Configure Auth0
 
 
-

To use Auth0 services, you’ll need to have an application set up in the Auth0 Dashboard. The Auth0 application is where you will configure how you want authentication to work for the project you are developing.

Configure an application

Use the interactive selector to create a new Auth0 application or select an existing application that represents the project you want to integrate with. Every application in Auth0 is assigned an alphanumeric, unique client ID that your application code will use to call Auth0 APIs through the SDK.

Any settings you configure using this quickstart will automatically update for your Application in the Dashboard, which is where you can manage your Applications in the future.

If you would rather explore a complete configuration, you can view a sample application instead.

Configure Callback URLs

A callback URL is a URL in your application that you would like Auth0 to redirect users to after they have authenticated. If not set, users will not be returned to your application after they log in.

サンプルプロジェクトに沿って進めている場合は、http://localhost:3000に設定してください。

Configure Logout URLs

A logout URL is a URL in your application that you would like Auth0 to redirect users to after they have logged out. If not set, users will not be able to log out from your application and will receive an error.

サンプルプロジェクトに沿って進めている場合は、http://localhost:3000に設定してください。

Configure Allowed Web Origins

An Allowed Web Origin is a URL that you want to be allowed to access to your authentication flow. This must contain the URL of your project. If not properly set, your project will be unable to silently refresh authentication tokens, so your users will be logged out the next time they visit your application or refresh a page.

サンプルプロジェクトに沿って進めている場合は、http://localhost:3000に設定してください。

+

To use Auth0 services, you’ll need to have an application set up in the Auth0 Dashboard. The Auth0 application is where you will configure how you want authentication to work for the project you are developing.

Configure an application

Use the interactive selector to create a new Auth0 application or select an existing application that represents the project you want to integrate with. Every application in Auth0 is assigned an alphanumeric, unique client ID that your application code will use to call Auth0 APIs through the SDK.

Any settings you configure using this quickstart will automatically update for your Application in the Dashboard, which is where you can manage your Applications in the future.

If you would rather explore a complete configuration, you can view a sample application instead.

Configure Callback URLs

A callback URL is a URL in your application that you would like Auth0 to redirect users to after they have authenticated. If not set, users will not be returned to your application after they log in.

サンプルプロジェクトに沿って進めている場合は、http://localhost:3000に設定してください。

Configure Logout URLs

A logout URL is a URL in your application that you would like Auth0 to redirect users to after they have logged out. If not set, users will not be able to log out from your application and will receive an error.

サンプルプロジェクトに沿って進めている場合は、http://localhost:3000に設定してください。

Configure Allowed Web Origins

An Allowed Web Origin is a URL that you want to be allowed to access to your authentication flow. This must contain the URL of your project. If not properly set, your project will be unable to silently refresh authentication tokens, so your users will be logged out the next time they visit your application or refresh a page.

サンプルプロジェクトに沿って進めている場合は、http://localhost:3000に設定してください。

## Configure ACUL for Login ID screen {{{ data-action="code" data-code="settings.json" }}} -

Use Auth0 CLI to enable ACLU Login ID screen in your tenant. +

Use Auth0 CLI to enable ACLU Login ID screen in your tenant. @@ -55,11 +55,11 @@ npm install

-

ACUL Login ID screen Step 2 - Checkpoint
  1. Open your application (default: http://localhost:3000)

  2. Select the Log In button on the sample app

  3. You should be redirected to your Auth0 domain

After selecting Log In, you should see a blank page.

This is expected! It means Auth0 is trying to load your custom UI assets, which we have not created yet.

+

ACULのログインID画面の手順2 - チェックポイント
  1. アプリケーションを開きます(デフォルト:http://localhost:3000

  2. サンプルアプリにある[Log In(ログイン)]ボタンを選択します。

  3. Auth0のドメインにリダイレクトされるはずです。

ログインしたら、空のページが表示されるはずです。

これは期待通りです!Auth0はカスタムUIアセットを読み込もうとしていますが、それらはまだ作成されていません。

-

If you see the default Auth0 page instead of a blank page:

  1. Check if your custom domain is properly configured.

  2. Ensure your application is using the custom domain.

+

空のページではなく、デフォルトのAuth0のページが表示された場合には以下を行います。

  1. カスタムドメインが正しく構成されていることを確認します。

  2. アプリケーションがカスタムドメインを使用していることを確認します。

@@ -76,7 +76,7 @@ npm install
-

2. Change directory to the auth0-acul-react-boilerplate folder and install the application and the ACUL JS SDK.

// open the directory where you git clone the boilerplate
+

2. Change directory to the auth0-acul-react-boilerplate folder and install the application and the ACUL JS SDK.

// open the directory where you git clone the boilerplate
 
 cd auth0-acul-react-boilerplate && npm i
 
@@ -96,17 +96,17 @@ npm install @auth0/auth0-acul-js
 
 
-

The assets are served from localhost during development.

For production, you'll need to serve these assets from a CDN or static hosting service.

ACUL Login ID screen quickstart step 4 checkpoint

After selecting Log In, you are greeted with a “Hello World” page.

+

The assets are served from localhost during development.

For production, you'll need to serve these assets from a CDN or static hosting service.

ACULのログインID画面のクイックスタートにある手順4のチェックポイント

[Log In(ログイン)]を選択すると、[Hello World]ページが表示されます。

-

Make sure to have installed the ACUL JS SDK after installing the boilerplate application.

+

ボイラープレートアプリケーションをインストールした後で、必ずACUL JS SDKをインストールしてください。

Build the ACUL Login ID screen

Change directory to the auth0-acul-react-boilerplate/src/screens/loginId/ and edit the index.tsx file.

Rebuild the application with the following command:

npm run build
 
 
-

ACUL Login ID screen quickstart step 4 rebuild the app checkpoint

Select Log In.

You should now see a customized login page as shown below:

+

ACULのログインID画面のクイックスタートにある手順4のアプリ再構築のチェックポイント

[Log In(ログイン)]を選択します。

以下のようにカスタマイズされたログインページが表示されるはずです。

diff --git a/ja-jp/articles/quickstart/backend/aspnet-core-webapi/interactive.md b/ja-jp/articles/quickstart/backend/aspnet-core-webapi/interactive.md index 03f7cca1d3..1f35ee4594 100644 --- a/ja-jp/articles/quickstart/backend/aspnet-core-webapi/interactive.md +++ b/ja-jp/articles/quickstart/backend/aspnet-core-webapi/interactive.md @@ -9,7 +9,7 @@ files: - files/HasScopeRequirement - files/ApiController github: - path: https://github.com/auth0-samples/auth0-aspnetcore-webapi-samples/tree/master/Quickstart/01-Authorization + path: Quickstart/01-Authorization locale: ja-JP --- @@ -21,7 +21,7 @@ locale: ja-JP ## アクセス許可を定義する -

アクセス許可は、ユーザーの代わりに、提供されたアクセストークンを使ってどのようにしてリソースにアクセスできるのかを定義できるようにします。たとえば、ユーザーがマネージャーアクセスレベルを持つ場合には、messagesリソースに対して読み取りアクセスを付与し、管理者アクセスレベルを持つ場合には、書き込みアクセスを付与することができます。

Auth0 Dashboardの[API]セクションにある[Permissions(権限)]ビューで使用可能なアクセス許可を定義することができます。以下の例ではread:messagesスコープを使用します。

[Auth0 Dashboard]>[Applications(アプリケーション)]>[APIs]>[Specific API(特定のAPI]>[Permissions(権限)]タブ

+

アクセス許可は、ユーザーの代わりに、提供されたアクセストークンを使ってどのようにしてリソースにアクセスできるのかを定義できるようにします。たとえば、ユーザーがマネージャーアクセスレベルを持つ場合には、messagesリソースに対して読み取りアクセスを付与し、管理者アクセスレベルを持つ場合には、書き込みアクセスを付与することができます。

Auth0 Dashboardの[API]セクションにある[Permissions(権限)]ビューで使用可能なアクセス許可を定義することができます。以下の例ではread:messagesスコープを使用します。

[Auth0 Dashboard]>[Applications(アプリケーション)]>[APIs]>[Specific API(特定のAPI]>[Permissions(権限)]タブ

## 依存関係をインストールする @@ -40,37 +40,37 @@ locale: ja-JP ## スコープを検証する {{{ data-action="code" data-code="HasScopeHandler.cs" }}} -

アクセストークンに正しいスコープが含まれていることを確認するには、ASP.NET Coreのポリシーベースの認可を使用します。

  1. HasScopeRequirementという名前の新しい認可要求を作成します。これは、Auth0テナント発行のscopeクレームが存在するかを確認し、存在する場合には、要求されたスコープがそのクレームに含まれているかを確認します。

  2. Program.csファイルにあるvar builder = WebApplication.CreateBuilder(args);メソッドの下に、app.AddAuthorizationメソッドへの呼び出しを追加します。

  3. スコープのポリシーを追加するには、各スコープにAddPolicyを呼び出します。

  4. HasScopeHandlerクラスのシングルトンを登録します。

+

アクセストークンに正しいスコープが含まれていることを確認するには、ASP.NET Coreのポリシーベースの認可を使用します。

  1. HasScopeRequirementという名前の新しい認可要求を作成します。これは、Auth0テナント発行のscopeクレームが存在するかを確認し、存在する場合には、要求されたスコープがそのクレームに含まれているかを確認します。

  2. Program.csファイルにあるvar builder = WebApplication.CreateBuilder(args);メソッドの下に、app.AddAuthorizationメソッドへの呼び出しを追加します。

  3. スコープのポリシーを追加するには、各スコープにAddPolicyを呼び出します。

  4. HasScopeHandlerクラスのシングルトンを登録します。

## APIエンドポイントを保護する {{{ data-action="code" data-code="ApiController.cs" }}} -

JWTミドルウェアは、ASP.NET Coreの標準の認証および認可メカニズムと統合します。

エンドポイントのセキュリティを保護するには、[Authorize]属性をコントローラーのアクション(すべてのアクションのセキュリティを保護するには、コントローラー)に追加します。

特定のスコープが必要なエンドポイントのセキュリティを保護するには、正しいスコープがaccess_tokenに存在することを確認します。そのためには、Authorize属性をScopedアクションに追加し、read:messagespolicyパラメーターとして渡します。

+

JWTミドルウェアは、ASP.NET Coreの標準の認証および認可メカニズムと統合します。

エンドポイントのセキュリティを保護するには、[Authorize]属性をコントローラーのアクション(すべてのアクションのセキュリティを保護するには、コントローラー)に追加します。

特定のスコープが必要なエンドポイントのセキュリティを保護するには、正しいスコープがaccess_tokenに存在することを確認します。そのためには、Authorize属性をScopedアクションに追加し、read:messagespolicyパラメーターとして渡します。

## APIを呼び出す -

APIの呼び出し方は、開発しているアプリケーションの種類と使用しているフレームワークに依存します。詳細については、該当するアプリケーションのクイックスタートをお読みください。

アクセストークン取得する

開発しているアプリケーションの種類や使用しているフレームワークが何であったとしても、APIを呼び出すにはアクセストークンが必要です。

シングルページアプリケーション(SPA)またはネイティブアプリケーションからAPIを呼び出すと、認可フローの完了後にアクセストークンを受け取ります。

コマンドラインツールや他のサービスなど、ユーザーが資格情報を入力しないものからAPIを呼び出す際には、OAuthクライアントの資格情報フローを使用します。そのためには、マシンツーマシンアプリケーションを登録し、要求内で以下の値を渡します。

  • クライアントIDclient_idパラメーターとして渡す。

  • クライアントシークレットclient_secretパラメーターとして渡す。

  • API 識別子(このクイックスタートで以前にミドルウェアの構成に使用したのと同じ値)をaudienceパラメーターとして渡す。

マシンツーマシンアプリケーションにクライアントIDとクライアントシークレットを取得する詳細については、アプリケーションの設定をお読みください。

要求例


+

APIの呼び出し方は、開発しているアプリケーションの種類と使用しているフレームワークに依存します。詳細については、該当するアプリケーションのクイックスタートをお読みください。

アクセストークン取得する

開発しているアプリケーションの種類や使用しているフレームワークが何であったとしても、APIを呼び出すにはアクセストークンが必要です。

シングルページアプリケーション(SPA)またはネイティブアプリケーションからAPIを呼び出すと、認可フローの完了後にアクセストークンを受け取ります。

コマンドラインツールや他のサービスなど、ユーザーが資格情報を入力しないものからAPIを呼び出す際には、OAuthクライアントの資格情報フローを使用します。そのためには、マシンツーマシンアプリケーションを登録し、要求内で以下の値を渡します。

  • クライアントIDclient_idパラメーターとして渡す。

  • クライアントシークレットclient_secretパラメーターとして渡す。

  • API 識別子(このクイックスタートで以前にミドルウェアの構成に使用したのと同じ値)をaudienceパラメーターとして渡す。

マシンツーマシンアプリケーションにクライアントIDとクライアントシークレットを取得する詳細については、アプリケーションの設定をお読みください。

要求例


 
 
- + -
curl --request post \
+  
curl --request post \
 
   --url 'https://${account.namespace}/oauth/token' \
 
-  --header 'content-type: application/x-www-form-urlencoded'
var client = new RestClient("https://${account.namespace}/oauth/token");
+  --header 'content-type: application/x-www-form-urlencoded'
var client = new RestClient("https://${account.namespace}/oauth/token");
 
 var request = new RestRequest(Method.POST);
 
 request.AddHeader("content-type", "application/x-www-form-urlencoded");
 
-IRestResponse response = client.Execute(request);
package main
+IRestResponse response = client.Execute(request);
package main
 
 
 
@@ -118,11 +118,11 @@ func main() {
 
 
 
-}
HttpResponse<String> response = Unirest.post("https://${account.namespace}/oauth/token")
+}
HttpResponse<String> response = Unirest.post("https://${account.namespace}/oauth/token")
 
   .header("content-type", "application/x-www-form-urlencoded")
 
-  .asString();
var axios = require("axios").default;
+  .asString();
var axios = require("axios").default;
 
 
 
@@ -146,7 +146,7 @@ axios.request(options).then(function (response) {
 
   console.error(error);
 
-});
#import <Foundation/Foundation.h>
+});
#import <Foundation/Foundation.h>
 
 
 
@@ -186,7 +186,7 @@ NSURLSessionDataTask *dataTask = [session dataTaskWithRequest:request
 
                                             }];
 
-[dataTask resume];
$curl = curl_init();
+[dataTask resume];
$curl = curl_init();
 
 
 
@@ -234,7 +234,7 @@ if ($err) {
 
   echo $response;
 
-}
import http.client
+}
import http.client
 
 
 
@@ -256,7 +256,7 @@ data = res.read()
 
 
 
-print(data.decode("utf-8"))
require 'uri'
+print(data.decode("utf-8"))
require 'uri'
 
 require 'net/http'
 
@@ -284,7 +284,7 @@ request["content-type"] = 'application/x-www-form-urlencoded'
 
 response = http.request(request)
 
-puts response.read_body
import Foundation
+puts response.read_body
import Foundation
 
 
 
@@ -332,23 +332,23 @@ dataTask.resume()
- + -
curl --request get \
+  
curl --request get \
 
   --url http://localhost:3010/api/private \
 
-  --header 'authorization: Bearer YOUR_ACCESS_TOKEN'
var client = new RestClient("http://localhost:3010/api/private");
+  --header 'authorization: Bearer YOUR_ACCESS_TOKEN'
var client = new RestClient("http://localhost:3010/api/private");
 
 var request = new RestRequest(Method.GET);
 
 request.AddHeader("authorization", "Bearer YOUR_ACCESS_TOKEN");
 
-IRestResponse response = client.Execute(request);
package main
+IRestResponse response = client.Execute(request);
package main
 
 
 
@@ -396,11 +396,11 @@ func main() {
 
 
 
-}
HttpResponse<String> response = Unirest.get("http://localhost:3010/api/private")
+}
HttpResponse<String> response = Unirest.get("http://localhost:3010/api/private")
 
   .header("authorization", "Bearer YOUR_ACCESS_TOKEN")
 
-  .asString();
var axios = require("axios").default;
+  .asString();
var axios = require("axios").default;
 
 
 
@@ -424,7 +424,7 @@ axios.request(options).then(function (response) {
 
   console.error(error);
 
-});
#import <Foundation/Foundation.h>
+});
#import <Foundation/Foundation.h>
 
 
 
@@ -464,7 +464,7 @@ NSURLSessionDataTask *dataTask = [session dataTaskWithRequest:request
 
                                             }];
 
-[dataTask resume];
$curl = curl_init();
+[dataTask resume];
$curl = curl_init();
 
 
 
@@ -514,7 +514,7 @@ if ($err) {
 
   echo $response;
 
-}
import http.client
+}
import http.client
 
 
 
@@ -536,7 +536,7 @@ data = res.read()
 
 
 
-print(data.decode("utf-8"))
require 'uri'
+print(data.decode("utf-8"))
require 'uri'
 
 require 'net/http'
 
@@ -558,7 +558,7 @@ request["authorization"] = 'Bearer YOUR_ACCESS_TOKEN'
 
 response = http.request(request)
 
-puts response.read_body
import Foundation
+puts response.read_body
import Foundation
 
 
 
@@ -606,6 +606,6 @@ dataTask.resume()
-

Sorry about that. Here are a few things to double check:

  • make sure ValidIssuer and ValidAudience are configured correctly

  • make sure the token is added as the Authorization header

  • check that the token has the correct scopes (you can use jwt.io to verify)

Still having issues? To get more help, check out our documentation or visit our community page.

+

すみません。いくつかの点をもう一度確認してください。

  • ValidIssuerValidAudienceが正しく構成されていることを確認します

  • トークンをAuthorizationヘッダーに含めて追加したことを確認します

  • トークンに正しいスコープがあることを確認します(確認にはjwt.ioを使用できます)

まだお困りですか?当社提供のドキュメントまたはコミュニティページで詳しい情報を確認してください。

diff --git a/ja-jp/articles/quickstart/backend/django/interactive.md b/ja-jp/articles/quickstart/backend/django/interactive.md index 7a7e104626..3000c7ed9a 100644 --- a/ja-jp/articles/quickstart/backend/django/interactive.md +++ b/ja-jp/articles/quickstart/backend/django/interactive.md @@ -7,19 +7,19 @@ files: - files/apiexample/views - files/apiexample/urls github: - path: https://github.com/auth0-samples/auth0-django-api/tree/master/01-Authorization + path: 01-Authorization locale: ja-JP --- # Django APIアプリケーションに認可を追加する -

このガイドは、Djangoを使ってビルドされた新規または既存のPython APIアプリケーションにAuth0を統合する方法を説明します。

Auth0 DashboardでAPIをまだ作成していない場合は、対話型のセレクターを使ってAuth0 APIを新規作成します。そうでない場合は、統合したいプロジェクトを表す既存のAPIを選択することができます。

または、Auth0 Dashboardを使って初めてAPIをセットアップする方法を使用の開始ガイドで確認することもできます。

Auth0にあるAPIはそれぞれAPI識別子を使って構成され、アプリケーションのコードはAPI識別子をオーディエンスとしてアクセストークンを検証します。

Auth0を初めてご利用ですか?Auth0の仕組みと、OAuth 2.0フレームワークを用いたAPI認証と認可の実装について説明します。

+

このガイドは、Djangoを使ってビルドされた新規または既存のPython APIアプリケーションにAuth0を統合する方法を説明します。

Auth0 DashboardでAPIをまだ作成していない場合は、対話型のセレクターを使ってAuth0 APIを新規作成します。そうでない場合は、統合したいプロジェクトを表す既存のAPIを選択することができます。

または、Auth0 Dashboardを使って初めてAPIをセットアップする方法を使用の開始ガイドで確認することもできます。

Auth0にあるAPIはそれぞれAPI識別子を使って構成され、アプリケーションのコードはAPI識別子をオーディエンスとしてアクセストークンを検証します。

Auth0を初めてご利用ですか?Auth0の仕組みと、OAuth 2.0フレームワークを用いたAPI認証と認可の実装について説明します。

## アクセス許可を定義する -

アクセス許可は、ユーザーの代わりに、提供されたアクセストークンを使ってどのようにしてリソースにアクセスできるのかを定義できるようにします。たとえば、ユーザーがマネージャーアクセスレベルを持つ場合には、messagesリソースに対して読み取りアクセスを付与し、管理者アクセスレベルを持つ場合には、書き込みアクセスを付与することができます。

Auth0 Dashboardの[API]セクションにある[Permissions(権限)]ビューで使用可能なアクセス許可を定義することができます。以下の例ではread:messagesスコープを使用します。

[Auth0 Dashboard]>[Applications(アプリケーション)]>[APIs]>[Specific API(特定のAPI]>[Permissions(権限)]タブ

+

アクセス許可は、ユーザーの代わりに、提供されたアクセストークンを使ってどのようにしてリソースにアクセスできるのかを定義できるようにします。たとえば、ユーザーがマネージャーアクセスレベルを持つ場合には、messagesリソースに対して読み取りアクセスを付与し、管理者アクセスレベルを持つ場合には、書き込みアクセスを付与することができます。

Auth0 Dashboardの[API]セクションにある[Permissions(権限)]ビューで使用可能なアクセス許可を定義することができます。以下の例ではread:messagesスコープを使用します。

[Auth0 Dashboard]>[Applications(アプリケーション)]>[APIs]>[Specific API(特定のAPI]>[Permissions(権限)]タブ

## DjangoにAuth0の使用を構成する @@ -31,7 +31,7 @@ locale: ja-JP ## JWTバリデーターを作成する {{{ data-action="code" data-code="apiexample/validator.py" }}} -

Authlibという名前のライブラリーを使用して、ResourceProtectorを作成します。これはDjangoビューのデコレーターの一種で、該当するバリデーターを使ってリソース(APIビュー)を保護します。

バリデーターは、リソースに渡すアクセストークンに有効な署名とクレームがあることを確認して検証します。

AuthLibのJWTBearerTokenValidatorバリデーターに多少の変更を加えて、アクセストークンの検証要件が満たされるようにします。

Auth0JWTBearerTokenValidatorを作成するには、domainaudience(API識別子)に渡すことが必要です。そうすると、トークンの署名を検証するのに必要な公開鍵が取得され、JWTBearerTokenValidatorクラスに渡されます。

そして、クラスのclaims_optionsをオーバーライドし、トークンのexpiryaudienceissueクレームが要件を満たして有効であることを確認します。

インタラクティブパネルからのコードを利用して、apiexample/validator.pyファイルを作成します。

+

Authlibという名前のライブラリーを使用して、ResourceProtectorを作成します。これはDjangoビューのデコレーターの一種で、該当するバリデーターを使ってリソース(APIビュー)を保護します。

バリデーターは、リソースに渡すアクセストークンに有効な署名とクレームがあることを確認して検証します。

AuthLibのJWTBearerTokenValidatorバリデーターに多少の変更を加えて、アクセストークンの検証要件が満たされるようにします。

Auth0JWTBearerTokenValidatorを作成するには、domainaudience(API識別子)に渡すことが必要です。そうすると、トークンの署名を検証するのに必要な公開鍵が取得され、JWTBearerTokenValidatorクラスに渡されます。

そして、クラスのclaims_optionsをオーバーライドし、トークンのexpiryaudienceissueクレームが要件を満たして有効であることを確認します。

インタラクティブパネルからのコードを利用して、apiexample/validator.pyファイルを作成します。

## APIビューを作成する {{{ data-action="code" data-code="apiexample/views.py" }}} @@ -41,27 +41,27 @@ locale: ja-JP ## URLマッピングを追加する {{{ data-action="code" data-code="apiexample/urls.py#8:10" }}} -

前の手順では、views.pyファイルにメソッドを追加しました。次に、DjangoのURL dispatcherを使用して、それらのメソッドをURLへマッピングします。URL dispatcherでは、URLパターンをビューにマッピングすることができます。

apiexample/urls.pyファイルにURLパターンを追加します。

APIを呼び出す

APIを呼び出すにはアクセストークンが必要です。テスト用のアクセストークンは、APIの設定[Test(テスト)]ビューから取得することができます。

[Auth0 Dashboard]>[Applications(アプリケーション)]>[API]>[Specific API(特定のAPI]>[Test(テスト)]タブ

要求のAuthorizationヘッダーにアクセストークンを指定します。


+

前の手順では、views.pyファイルにメソッドを追加しました。次に、DjangoのURL dispatcherを使用して、それらのメソッドをURLへマッピングします。URL dispatcherでは、URLパターンをビューにマッピングすることができます。

apiexample/urls.pyファイルにURLパターンを追加します。

APIを呼び出す

APIを呼び出すにはアクセストークンが必要です。テスト用のアクセストークンは、APIの設定[Test(テスト)]ビューから取得することができます。

[Auth0 Dashboard]>[Applications(アプリケーション)]>[API]>[Specific API(特定のAPI]>[Test(テスト)]タブ

要求のAuthorizationヘッダーにアクセストークンを指定します。


 
 
- + -
curl --request get \
+  
curl --request get \
 
   --url 'http:///${account.namespace}.com/api_path' \
 
-  --header 'authorization: Bearer YOUR_ACCESS_TOKEN_HERE'
var client = new RestClient("http:///${account.namespace}.com/api_path");
+  --header 'authorization: Bearer YOUR_ACCESS_TOKEN_HERE'
var client = new RestClient("http:///${account.namespace}.com/api_path");
 
 var request = new RestRequest(Method.GET);
 
 request.AddHeader("authorization", "Bearer YOUR_ACCESS_TOKEN_HERE");
 
-IRestResponse response = client.Execute(request);
package main
+IRestResponse response = client.Execute(request);
package main
 
 
 
@@ -109,11 +109,11 @@ func main() {
 
 
 
-}
HttpResponse<String> response = Unirest.get("http:///${account.namespace}.com/api_path")
+}
HttpResponse<String> response = Unirest.get("http:///${account.namespace}.com/api_path")
 
   .header("authorization", "Bearer YOUR_ACCESS_TOKEN_HERE")
 
-  .asString();
var axios = require("axios").default;
+  .asString();
var axios = require("axios").default;
 
 
 
@@ -137,7 +137,7 @@ axios.request(options).then(function (response) {
 
   console.error(error);
 
-});
#import <Foundation/Foundation.h>
+});
#import <Foundation/Foundation.h>
 
 
 
@@ -177,7 +177,7 @@ NSURLSessionDataTask *dataTask = [session dataTaskWithRequest:request
 
                                             }];
 
-[dataTask resume];
$curl = curl_init();
+[dataTask resume];
$curl = curl_init();
 
 
 
@@ -225,7 +225,7 @@ if ($err) {
 
   echo $response;
 
-}
import http.client
+}
import http.client
 
 
 
@@ -247,7 +247,7 @@ data = res.read()
 
 
 
-print(data.decode("utf-8"))
require 'uri'
+print(data.decode("utf-8"))
require 'uri'
 
 require 'net/http'
 
@@ -269,7 +269,7 @@ request["authorization"] = 'Bearer YOUR_ACCESS_TOKEN_HERE'
 
 response = http.request(request)
 
-puts response.read_body
import Foundation
+puts response.read_body
import Foundation
 
 
 
diff --git a/ja-jp/articles/quickstart/backend/golang/interactive.md b/ja-jp/articles/quickstart/backend/golang/interactive.md
index 0e60bc7e00..c501ca08d6 100644
--- a/ja-jp/articles/quickstart/backend/golang/interactive.md
+++ b/ja-jp/articles/quickstart/backend/golang/interactive.md
@@ -6,19 +6,19 @@ files:
  - files/middleware/jwt
  - files/main
 github:
-  path: https://github.com/auth0-samples/auth0-golang-api-samples/tree/master/01-Authorization-RS256
+  path: 01-Authorization-RS256
 locale: ja-JP
 ---
 
 # Goアプリケーションに認可を追加する
 
 
-

このガイドは、新規または既存のGo APIアプリケーションにgo-jwt-middlewareパッケージを使ってAuth0を統合する方法を説明します。

Auth0 DashboardでAPIをまだ作成していない場合は、対話型のセレクターを使ってAuth0 APIを新規作成します。そうでない場合は、プロジェクトに既存のAPIを選択することができます。

Auth0 Dashboardを使って初めてAPIをセットアップする場合には、使用の開始ガイドを確認してください。

それぞれのAuth0 APIにはAPI識別子があり、アプリケーションにアクセストークンの検証で使用されます。

Auth0を初めてご利用ですか?Auth0の仕組みと、OAuth 2.0フレームワークを用いたAPI認証と認可の実装について説明します。

+

このガイドは、新規または既存のGo APIアプリケーションにgo-jwt-middlewareパッケージを使ってAuth0を統合する方法を説明します。

Auth0 DashboardでAPIをまだ作成していない場合は、対話型のセレクターを使ってAuth0 APIを新規作成します。そうでない場合は、プロジェクトに既存のAPIを選択することができます。

Auth0 Dashboardを使って初めてAPIをセットアップする場合には、使用の開始ガイドを確認してください。

それぞれのAuth0 APIにはAPI識別子があり、アプリケーションにアクセストークンの検証で使用されます。

Auth0を初めてご利用ですか?Auth0の仕組みと、OAuth 2.0フレームワークを用いたAPI認証と認可の実装について説明します。

## アクセス許可を定義する -

アクセス許可は、ユーザーの代わりに、提供されたアクセストークンを使ってどのようにしてリソースにアクセスできるのかを定義できるようにします。たとえば、ユーザーがマネージャーアクセスレベルを持つ場合には、messagesリソースに対して読み取りアクセスを付与し、管理者アクセスレベルを持つ場合には、書き込みアクセスを付与することができます。

Auth0 Dashboardの[API]セクションにある[Permissions(権限)]ビューで使用可能なアクセス許可を定義することができます。以下の例ではread:messagesスコープを使用します。

[Auth0 Dashboard]>[Applications(アプリケーション)]>[APIs]>[Specific API(特定のAPI]>[Permissions(権限)]タブ

+

アクセス許可は、ユーザーの代わりに、提供されたアクセストークンを使ってどのようにしてリソースにアクセスできるのかを定義できるようにします。たとえば、ユーザーがマネージャーアクセスレベルを持つ場合には、messagesリソースに対して読み取りアクセスを付与し、管理者アクセスレベルを持つ場合には、書き込みアクセスを付与することができます。

Auth0 Dashboardの[API]セクションにある[Permissions(権限)]ビューで使用可能なアクセス許可を定義することができます。以下の例ではread:messagesスコープを使用します。

[Auth0 Dashboard]>[Applications(アプリケーション)]>[APIs]>[Specific API(特定のAPI]>[Permissions(権限)]タブ

## 依存関係をインストールする @@ -73,32 +73,32 @@ AUTH0_AUDIENCE='${apiIdentifier}' ## アクセストークンを検証するミドルウェアを作成する {{{ data-action="code" data-code="middleware/jwt.go" }}} -

EnsureValidTokenミドルウェア関数はアクセストークンを検証します。この関数は、保護したいすべてのエンドポイントに適用することができます。トークンが有効であれば、エンドポイントがリソースを開放します。トークンが無効であれば、APIが401 Authorizationエラーを返します。

受信する要求のアクセストークンを検証するには、go-jwt-middlewareミドルウェア をセットアップします。

APIはデフォルトで、RS256をトークン署名アルゴリズムとしてセットアップします。RS256は秘密鍵と公開鍵のペアで機能するため、トークンはAuth0アカウントの公開鍵を使用して検証することができます。この公開鍵には、https://{yourDomain}/.well-known/jwks.jsonでアクセスすることができます。

トークンが要求されたリソースへのアクセスに十分なスコープを持っているか確認する機能を含めてください。

HasScope関数を作成して、応答を返す前に、アクセストークンに正しいスコープがあることを確認します。

+

EnsureValidTokenミドルウェア関数はアクセストークンを検証します。この関数は、保護したいすべてのエンドポイントに適用することができます。トークンが有効であれば、エンドポイントがリソースを開放します。トークンが無効であれば、APIが401 Authorizationエラーを返します。

受信する要求のアクセストークンを検証するには、go-jwt-middlewareミドルウェア をセットアップします。

APIはデフォルトで、RS256をトークン署名アルゴリズムとしてセットアップします。RS256は秘密鍵と公開鍵のペアで機能するため、トークンはAuth0アカウントの公開鍵を使用して検証することができます。この公開鍵には、https://{yourDomain}/.well-known/jwks.jsonでアクセスすることができます。

トークンが要求されたリソースへのアクセスに十分なスコープを持っているか確認する機能を含めてください。

HasScope関数を作成して、応答を返す前に、アクセストークンに正しいスコープがあることを確認します。

## APIエンドポイントを保護する {{{ data-action="code" data-code="main.go" }}} -

この例では、EnsureTokenミドルウェアを使用しない/api/publicエンドポイントを作成して、未認証の要求にも対応できるようにします。

EnsureTokenミドルウェアを必要とする/api/privateエンドポイントを作成して、追加スコープのないアクセストークンを含む認証済み要求にのみ利用できるようにします。

EnsureTokenミドルウェアとHasScopeを必要とする/api/private-scopedエンドポイントを作成して、read:messagesスコープを付与されたアクセストークンを含む認証済み要求にのみ利用できるようにします。

read:messagesスコープのみがHasScope関数で検査されます。状況に応じて、複数のスコープを受け付けるように拡張するか、スタンドアローンのミドルウェアにすることをお勧めします。

APIを呼び出す

APIを呼び出すにはアクセストークンが必要です。テスト用のアクセストークンは、API設定[Test(テスト)]ビューから取得することができます。

[Auth0 Dashboard]>[Applications(アプリケーション)]>[API]>[Specific API(特定のAPI]>[Test(テスト)]タブ

要求のAuthorizationヘッダーにアクセストークンを指定します。


+

この例では、EnsureTokenミドルウェアを使用しない/api/publicエンドポイントを作成して、未認証の要求にも対応できるようにします。

EnsureTokenミドルウェアを必要とする/api/privateエンドポイントを作成して、追加スコープのないアクセストークンを含む認証済み要求にのみ利用できるようにします。

EnsureTokenミドルウェアとHasScopeを必要とする/api/private-scopedエンドポイントを作成して、read:messagesスコープを付与されたアクセストークンを含む認証済み要求にのみ利用できるようにします。

read:messagesスコープのみがHasScope関数で検査されます。状況に応じて、複数のスコープを受け付けるように拡張するか、スタンドアローンのミドルウェアにすることをお勧めします。

APIを呼び出す

APIを呼び出すにはアクセストークンが必要です。テスト用のアクセストークンは、API設定[Test(テスト)]ビューから取得することができます。

[Auth0 Dashboard]>[Applications(アプリケーション)]>[API]>[Specific API(特定のAPI]>[Test(テスト)]タブ

要求のAuthorizationヘッダーにアクセストークンを指定します。


 
 
- + -
curl --request get \
+  
curl --request get \
 
   --url 'http:///${account.namespace}/api_path' \
 
-  --header 'authorization: Bearer YOUR_ACCESS_TOKEN_HERE'
var client = new RestClient("http:///${account.namespace}/api_path");
+  --header 'authorization: Bearer YOUR_ACCESS_TOKEN_HERE'
var client = new RestClient("http:///${account.namespace}/api_path");
 
 var request = new RestRequest(Method.GET);
 
 request.AddHeader("authorization", "Bearer YOUR_ACCESS_TOKEN_HERE");
 
-IRestResponse response = client.Execute(request);
package main
+IRestResponse response = client.Execute(request);
package main
 
 
 
@@ -146,11 +146,11 @@ func main() {
 
 
 
-}
HttpResponse<String> response = Unirest.get("http:///${account.namespace}/api_path")
+}
HttpResponse<String> response = Unirest.get("http:///${account.namespace}/api_path")
 
   .header("authorization", "Bearer YOUR_ACCESS_TOKEN_HERE")
 
-  .asString();
var axios = require("axios").default;
+  .asString();
var axios = require("axios").default;
 
 
 
@@ -174,7 +174,7 @@ axios.request(options).then(function (response) {
 
   console.error(error);
 
-});
#import <Foundation/Foundation.h>
+});
#import <Foundation/Foundation.h>
 
 
 
@@ -214,7 +214,7 @@ NSURLSessionDataTask *dataTask = [session dataTaskWithRequest:request
 
                                             }];
 
-[dataTask resume];
$curl = curl_init();
+[dataTask resume];
$curl = curl_init();
 
 
 
@@ -262,7 +262,7 @@ if ($err) {
 
   echo $response;
 
-}
import http.client
+}
import http.client
 
 
 
@@ -284,7 +284,7 @@ data = res.read()
 
 
 
-print(data.decode("utf-8"))
require 'uri'
+print(data.decode("utf-8"))
require 'uri'
 
 require 'net/http'
 
@@ -306,7 +306,7 @@ request["authorization"] = 'Bearer YOUR_ACCESS_TOKEN_HERE'
 
 response = http.request(request)
 
-puts response.read_body
import Foundation
+puts response.read_body
import Foundation
 
 
 
@@ -354,6 +354,6 @@ dataTask.resume()
-

If your application did not start successfully:

  • Verify you added the token as the Authorization header

  • Ensure the token has the correct scopes. Verify with jwt.io.

Still having issues? Check out our documentation or visit our community page to get more help.

+

アプリケーションが正常に起動しなかった場合は以下を行います。

  • トークンをAuthorizationヘッダーに含めて追加したことを確認します。

  • トークンに正しいスコープがあることを確認します。確認にはjwt.ioを使用します。

まだお困りですか?当社提供のドキュメントまたはコミュニティページで詳しい情報を確認してください。

diff --git a/ja-jp/articles/quickstart/backend/java-spring-security5/interactive.md b/ja-jp/articles/quickstart/backend/java-spring-security5/interactive.md index 4394acf8f2..29e060eb54 100644 --- a/ja-jp/articles/quickstart/backend/java-spring-security5/interactive.md +++ b/ja-jp/articles/quickstart/backend/java-spring-security5/interactive.md @@ -8,19 +8,19 @@ files: - files/Message - files/APIController github: - path: https://github.com/auth0-samples/auth0-spring-security5-api-sample/tree/master/01-Authorization-MVC + path: 01-Authorization-MVC locale: ja-JP --- # Spring Bootアプリケーションに認可を追加する -

Auth0を使用すると、アプリケーションにすばやく認可を追加することができます。このガイドは、新規または既存のSpring BootアプリケーションにAuth0を統合する方法を説明します。

Auth0 DashboardでAPIをまだ作成していない場合は、対話型のセレクターを使ってAuth0 APIを新規作成します。そうでない場合は、統合したいプロジェクトを表す既存のAPIを選択します。

Auth0 Dashboardを使って初めてAPIをセットアップする場合には、使用の開始ガイドを確認してください。

それぞれのAuth0 APIにはAPI識別子があり、アプリケーションにアクセストークンの検証で使用されます。

Auth0を初めてご利用ですか?Auth0の仕組みと、OAuth 2.0フレームワークを用いたAPI認証と認可の実装について説明します。

+

Auth0を使用すると、アプリケーションにすばやく認可を追加することができます。このガイドは、新規または既存のSpring BootアプリケーションにAuth0を統合する方法を説明します。

Auth0 DashboardでAPIをまだ作成していない場合は、対話型のセレクターを使ってAuth0 APIを新規作成します。そうでない場合は、統合したいプロジェクトを表す既存のAPIを選択します。

Auth0 Dashboardを使って初めてAPIをセットアップする場合には、使用の開始ガイドを確認してください。

それぞれのAuth0 APIにはAPI識別子があり、アプリケーションにアクセストークンの検証で使用されます。

Auth0を初めてご利用ですか?Auth0の仕組みと、OAuth 2.0フレームワークを用いたAPI認証と認可の実装について説明します。

## アクセス許可を定義する -

アクセス許可は、ユーザーの代わりに、提供されたアクセストークンを使ってどのようにしてリソースにアクセスできるのかを定義できるようにします。たとえば、ユーザーがマネージャーアクセスレベルを持つ場合には、messagesリソースに対して読み出しアクセスを付与し、管理者アクセスレベルを持つ場合には、書き込みアクセスを付与することができます。

Auth0 Dashboardの[APIs]セクションにある[Permissions(権限)]ビューで使用可能なアクセス許可を定義することができます。

[Auth0 Dashboard]>[Applications(アプリケーション)]>[APIs]>[Specific API(特定のAPI]>[Permissions(権限)]タブ

以下の例ではread:messagesスコープを使用します。

+

アクセス許可は、ユーザーの代わりに、提供されたアクセストークンを使ってどのようにしてリソースにアクセスできるのかを定義できるようにします。たとえば、ユーザーがマネージャーアクセスレベルを持つ場合には、messagesリソースに対して読み出しアクセスを付与し、管理者アクセスレベルを持つ場合には、書き込みアクセスを付与することができます。

Auth0 Dashboardの[APIs]セクションにある[Permissions(権限)]ビューで使用可能なアクセス許可を定義することができます。

[Auth0 Dashboard]>[Applications(アプリケーション)]>[APIs]>[Specific API(特定のAPI]>[Permissions(権限)]タブ

以下の例ではread:messagesスコープを使用します。

## サンプルプロジェクトを構成する {{{ data-action="code" data-code="application.yml#1:6" }}} @@ -30,7 +30,7 @@ locale: ja-JP ## 依存関係をインストールする {{{ data-action="code" data-code="application.yml#1:6" }}} -

Gradleを使用している場合、Spring Boot GradleプラグインDependency Managementプラグインを使って必要な依存関係を追加し、依存関係のバージョンを解決することができます:

// build.gradle
+

Gradleを使用している場合、Spring Boot GradleプラグインDependency Managementプラグインを使って必要な依存関係を追加し、依存関係のバージョンを解決することができます:

// build.gradle
 
 
 
@@ -115,15 +115,31 @@ locale: ja-JP
 ## APIコントローラーを作成する {{{ data-action="code" data-code="APIController.java" }}}
 
 
-

APIControllerという名前の新しいクラスを作成し、エンドポイントへのリクエストを処理します。APIControllerには、APIエンドポイントを保護するセクションで定義されるように、3つのルートがあります。たとえば、@CrossOriginの注釈からすべてのオリジンを許可します。実際のアプリケーションでは、ユースケースに対してCORSを構成する必要があります。

+

APIControllerという名前の新しいクラスを作成し、エンドポイントへの要求を処理します。APIControllerには、APIエンドポイントを保護するセクションで定義されるように、3つのルートがあります。たとえば、@CrossOriginの注釈からすべてのオリジンを許可します。実際のアプリケーションでは、ユースケースに対してCORSを構成する必要があります。

## アプリケーションを実行する {{{ data-action="code" data-code="APIController.java" }}} -

サンプルプロジェクトを構築し実行するには、bootRun Gradleタスクを実行します。

LinuxまたはmacOS:

./gradlew bootRun

Windows:

gradlew.bat bootRun

MavenとSpring Boot Mavenプラグインで独自のアプリケーションを構成している場合は、spring-boot:runゴールを実行することができます。

LinuxまたはmacOS:

mvn spring-boot:run

Windows:

mvn.cmd spring-boot:run

Spring Boot API手順7「チェックポイント」

サンプルアプリケーションはhttp://localhost:3010/で入手できます。「APIの使用」の記事でAPIをテストおよび使用する方法についてお読みください。

+

サンプルプロジェクトを構築し実行するには、bootRun Gradleタスクを実行します。

LinuxまたはmacOS:

./gradlew bootRun
+
+
+ +

Windows:

gradlew.bat bootRun
+
+
+ +

MavenとSpring Boot Mavenプラグインで独自のアプリケーションを構成している場合は、spring-boot:runゴールを実行することができます。

LinuxまたはmacOS:

mvn spring-boot:run
+
+
+ +

Windows:

mvn.cmd spring-boot:run
+
+
+ +

Spring Boot API手順7「チェックポイント」

サンプルアプリケーションはhttp://localhost:3010/で入手できます。「APIの使用」の記事でAPIをテストおよび使用する方法についてお読みください。

-

If your application did not launch successfully:

Still having issues? Check out our documentation or visit our community page to get more help.

+

アプリケーションが正常に起動しなかった場合は以下を行います。

まだお困りですか?当社提供のドキュメントまたはコミュニティページで詳しい情報を確認してください。

diff --git a/ja-jp/articles/quickstart/backend/laravel/interactive.md b/ja-jp/articles/quickstart/backend/laravel/interactive.md index a62b0a1aec..27971bf721 100644 --- a/ja-jp/articles/quickstart/backend/laravel/interactive.md +++ b/ja-jp/articles/quickstart/backend/laravel/interactive.md @@ -5,14 +5,14 @@ interactive: true files: - files/routes/api github: - path: https://github.com/auth0-samples/laravel/tree/7.x/sample + path: sample locale: ja-JP --- # Laravelアプリケーションに認可を追加する -

Auth0のLaravel SDKを使用すると、Laravelアプリケーションにトークンベースの認可とルーティングに基づくアクセスコントロールを手軽に追加できます。このガイドでは、新規(または既存)のLaravel 9または10アプリケーションにAuth0を統合する方法を説明します。


バックエンドアプリケーションが従来のWebアプリケーションと異なるのは、前者がユーザー認証を処理しない、またはユーザーインターフェイスを持っていない点にあります。バックエンドアプリケーションには、他のアプリケーションが対話できるAPIが用意されており、ルートへのアクセス制御を行うために、リクエスト内のAuthorizationヘッダーからアクセストークンを受け入れます。

別のフロントエンドアプリケーションは通常、これらのタイプのバックエンドと対話するために構築されます。これには、シングルページアプリケーションネイティブまたはモバイルアプリ(Auth0はこれらすべてに対しSDKも提供)などさまざまな可能性があります。

ユーザーがバックエンドアプリケーションと対話する必要がある場合、まず、フロントエンドアプリケーションを使ってAuth0と認証を行います。フロントエンドアプリケーションはAuth0からアクセストークンを取得し、これを使ってユーザーに代わって、バックエンドアプリケーションにリクエストを行うことができます。

名前が示唆するように、アクセストークンはアクセス制御(認可)の問題に対処するように設計されており、ユーザーに関する情報は含まれていません。バックエンドアプリケーションは、アクセストークンとのみ動作します。Management APIを使ってトークンを作成したユーザーに関する情報を取得することができます。これについては後で説明します。

+

Auth0のLaravel SDKを使用すると、Laravelアプリケーションにトークンベースの認可とルーティングに基づくアクセスコントロールを手軽に追加できます。このガイドでは、新規(または既存)のLaravel 9または10アプリケーションにAuth0を統合する方法を説明します。


バックエンドアプリケーションが従来のWebアプリケーションと異なるのは、前者がユーザー認証を処理しない、またはユーザーインターフェイスを持っていない点にあります。バックエンドアプリケーションには、他のアプリケーションが対話できるAPIが用意されており、ルートへのアクセス制御を行うために、要求内のAuthorizationヘッダーからのアクセストークンを受け入れます。

別のフロントエンドアプリケーションは通常、これらのタイプのバックエンドと対話するために構築されます。これには、シングルページアプリケーションネイティブまたはモバイルアプリ(Auth0はこれらすべてに対しSDKも提供)などさまざまな可能性があります。

ユーザーがバックエンドアプリケーションと対話する必要がある場合、まず、フロントエンドアプリケーションを使ってAuth0と認証を行います。フロントエンドアプリケーションはAuth0からアクセストークンを取得し、これを使ってユーザーに代わって、バックエンドアプリケーションに要求することができます。

名前が示唆するように、アクセストークンはアクセス制御(認可)の問題に対処するように設計されており、ユーザーに関する情報は含まれていません。バックエンドアプリケーションは、アクセストークンとのみ動作します。Management APIを使ってトークンを作成したユーザーに関する情報を取得することができます。これについては後で説明します。

## Laravelをインストールする @@ -30,7 +30,7 @@ locale: ja-JP ## SDKをインストールする -

プロジェクトディレクトリで次のコマンドを実行して、Auth0 Laravel SDKをインストールします:

composer require auth0/login:^7.8 --update-with-all-dependencies
+

プロジェクトディレクトリで次のコマンドを実行して、Auth0 Laravel SDKをインストールします:

composer require auth0/login:^7.8 --update-with-all-dependencies
 
 
@@ -43,7 +43,7 @@ locale: ja-JP ## SDKを構成する -

プロジェクトディレクトリから次のコマンドを実行して、Auth0 CLIをダウンロードします:

curl -sSfL https://raw.githubusercontent.com/auth0/auth0-cli/main/install.sh | sh -s -- -b .
+

プロジェクトディレクトリから次のコマンドを実行して、Auth0 CLIをダウンロードします:

curl -sSfL https://raw.githubusercontent.com/auth0/auth0-cli/main/install.sh | sh -s -- -b .
 
 
@@ -94,7 +94,7 @@ locale: ja-JP ## アクセス制御 {{{ data-action="code" data-code="routes/api.php#6:16" }}} -

SDKは、apiミドルウェアと併用するLaravelアプリケーションで認可ガードを自動的に登録します。Laravelはデフォルトで、アプリケーションのroutes/api.phpファイルのすべてのルートに適用します。

構成を追加せずにSDKが期待通りに動作するには、routes/api.phpファイルでルートを定義する必要があります。

アプリケーションの経路へのアクセスを制約するには、Auth0 SDKの認可ガードを使用することができます。

Authorizationヘッダーで有効なアクセストークンを含まないリクエストを拒否するには、Laravelのauthミドルウェアを使用することができます。

Route::get('/private', function () {
+

SDKは、apiミドルウェアと併用するLaravelアプリケーションで認可ガードを自動的に登録します。Laravelはデフォルトで、アプリケーションのroutes/api.phpファイルのすべてのルートに適用します。

構成を追加せずにSDKが期待通りに動作するには、routes/api.phpファイルでルートを定義する必要があります。

アプリケーションの経路へのアクセスを制約するには、Auth0 SDKの認可ガードを使用することができます。

Authorizationヘッダーで有効なアクセストークンを含まない要求を拒否するには、Laravelのauthミドルウェアを使用することができます。

Route::get('/private', function () {
 
  return response()->json([
 
@@ -106,7 +106,7 @@ locale: ja-JP
 
 
-

また、これをLaravelのcanミドルウェアと組み合わせると、提供されたトークンに特定の権限を要求することができます。

Route::get('/scope', function () {
+

また、これをLaravelのcanミドルウェアと組み合わせると、提供されたトークンに特定の権限を要求することができます。

Route::get('/scope', function () {
 
  return response()->json([
 
@@ -156,7 +156,7 @@ locale: ja-JP
 ## ユーザー情報を取得する {{{ data-action="code" data-code="routes/api.php#32:51" }}}
 
 
-

Auth0 Management APIを使って、Auth0からアクセストークンを作成したユーザーについての情報を取得することができます。SDKにはこのAPIに便利なラッパーが備わっており、SDKのmanagement()メソッドからアクセス可能です。

Management APIを呼び出す前に、アプリケーションがManagement APIと通信できるようにしなければなりません。これを実行するには、Auth0 DashboardのAPIページ[Auth0 Management API]を選択してから[Machine to Machine Applications(M2Mアプリケーション)]タブを選択します。Laravelアプリケーションを認可してから、下矢印をクリックして、付与したいスコープを選択します。

以下の例では、read:usersスコープを付与する必要があります。APIエンドポイントのリストと必要なスコープについては、Management APIのドキュメントを参照してください。

use Auth0\Laravel\Facade\Auth0;
+

Auth0 Management APIを使って、Auth0からアクセストークンを作成したユーザーについての情報を取得することができます。SDKにはこのAPIに便利なラッパーが備わっており、SDKのmanagement()メソッドからアクセス可能です。

Management APIを呼び出す前に、アプリケーションがManagement APIと通信できるようにしなければなりません。これを実行するには、Auth0 DashboardのAPIページ[Auth0 Management API]を選択してから[Machine to Machine Applications(M2Mアプリケーション)]タブを選択します。Laravelアプリケーションを認可してから、下矢印をクリックして、付与したいスコープを選択します。

以下の例では、read:usersスコープを付与する必要があります。APIエンドポイントのリストと必要なスコープについては、Management APIのドキュメントを参照してください。

use Auth0\Laravel\Facade\Auth0;
 
 
 
@@ -202,7 +202,7 @@ Route::get('/me', function () {
 
 
-

アプリケーションでユーザー情報を短期間キャッシュする必要があります。これによって、アプリケーションがAuth0に対して行うリクエスト数を減らし、パフォーマンスが向上します。ユーザー情報をアプリケーションに長期間保存するとデータが古くなる可能性があるため避けてください。ユーザーの識別子以外のユーザー情報を持続的データベースに保存することも避けてください。

+

アプリケーションでユーザー情報を短期間キャッシュする必要があります。これによって、アプリケーションがAuth0に対して行う要求数を減らし、パフォーマンスが向上します。ユーザー情報をアプリケーションに長期間保存するとデータが古くなる可能性があるため避けてください。ユーザーの識別子以外のユーザー情報を持続的データベースに保存することも避けてください。

## アプリケーションを実行する @@ -216,10 +216,10 @@ Route::get('/me', function () { ## テストトークンを取得する -

アクセストークンの取得については、こちらに詳しく記載されています。ただし、このクイックスタートでは、API設定の[test(テスト)]ビューからアクセストークンを簡単に使用することができます。

上で作成した/meルートには関連付けられた実際のユーザーが存在しないため、テストトークンで動作しません。

Laravelクイックスタート手順8「チェックポイント」

シェルを開き、アプリケーションに要求を発行するようにします。

まず、パブリックルートを要求します。

curl --request GET \ --url http://localhost:8000/api \ --header 'Accept: application/json'

次に、Authorizationヘッダーでアクセストークンを使用して、保護されたルートを要求します。

curl --request GET \ --url http://localhost:8000/api/private \ --header 'Accept: application/json' \ --header 'Authorization: Bearer YOUR_ACCESS_TOKEN'

最後に、スコープで保護されたルートを要求するようにします。この要求は、アクセストークンにread:messagesスコープが付与されている場合にのみ成功します。

curl --request GET \ --url http://localhost:8000/api/scope \ --header 'Accept: application/json' \ --header 'Authorization: Bearer YOUR_ACCESS_TOKEN'

+

アクセストークンの取得については、こちらに詳しく記載されています。ただし、このクイックスタートでは、API設定の[test(テスト)]ビューからアクセストークンを簡単に使用することができます。

上で作成した/meルートには関連付けられた実際のユーザーが存在しないため、テストトークンで動作しません。

Laravelクイックスタート手順8「チェックポイント」

シェルを開き、アプリケーションに要求を発行するようにします。

まず、パブリックルートを要求します。

curl --request GET \ --url http://localhost:8000/api \ --header 'Accept: application/json'

次に、Authorizationヘッダーでアクセストークンを使用して、保護されたルートを要求します。

curl --request GET \ --url http://localhost:8000/api/private \ --header 'Accept: application/json' \ --header 'Authorization: Bearer YOUR_ACCESS_TOKEN'

最後に、スコープで保護されたルートを要求するようにします。この要求は、アクセストークンにread:messagesスコープが付与されている場合にのみ成功します。

curl --request GET \ --url http://localhost:8000/api/scope \ --header 'Accept: application/json' \ --header 'Authorization: Bearer YOUR_ACCESS_TOKEN'

-

Here are a couple of things to try:

  • Try running php artisan optimize:clear to clear Laravel's cache.

  • Ensure your .auth0.app.json and .auth0.api.json files are at the root of your project.

  • Ensure you have enabled your Laravel application as a Machine-to-Machine application and granted it all the necessary scopes for the Auth0 Management API from the Auth0 Dashboard.

Encountering problems? Check the SDK's documentation or our documentation hub. You should also consider visiting the community where our team and other community members can help answer your questions.

+

試せることがいくつかあります。

  • php artisan optimize:clearを実行してLaravelのキャッシュを消去してみます。

  • .auth0.app.jsonおよび.auth0.api.jsonファイルがプロジェクトのルートにあることを確認します。

  • Laravelアプリケーションをマシンツーマシンアプリケーションとして有効化し、Auth0 Dashboardを使用して、Auth0 Management APIで必要なスコープがすべて付与されていることを確認します。

問題が発生しましたか?SDKのドキュメントまたはAuth0のドキュメンテーションハブを確認してください。また、コミュニティの利用も検討してください。Auth0チームや他のコミュニティメンバーがご質問にお答えします。

-

その他の情報

  • ユーザーリポジトリとモデルはAuth0 Laravel SDKを拡張して、カスタムのユーザーモデルを使用し、データベースでユーザーの保管や取得を行う方法を指定することができます。

  • イベントフックはAuth0 Laravel SDKで発生したイベントをリッスンする方法を処理して、統合の動作を完全にカスタマイズすることができます。

  • Management API対応はAuth0 Laravel SDKに組み込まれているため、LaravelアプリケーションからManagement APIと対話することができます。

+

その他の情報

  • ユーザーリポジトリとモデルはAuth0 Laravel SDKを拡張して、カスタムのユーザーモデルを使用し、データベースでユーザーの保管や取得を行う方法を指定することができます。

  • イベントフックはAuth0 Laravel SDKで発生したイベントをリッスンする方法を処理して、統合の動作を完全にカスタマイズすることができます。

  • Management API対応はAuth0 Laravel SDKに組み込まれているため、LaravelアプリケーションからManagement APIと対話することができます。

diff --git a/ja-jp/articles/quickstart/backend/nodejs/interactive.md b/ja-jp/articles/quickstart/backend/nodejs/interactive.md index e76f1173d7..b06d43f13f 100644 --- a/ja-jp/articles/quickstart/backend/nodejs/interactive.md +++ b/ja-jp/articles/quickstart/backend/nodejs/interactive.md @@ -5,19 +5,19 @@ interactive: true files: - files/server github: - path: https://github.com/auth0-samples/auth0-express-api-samples/tree/master/01-Authorization-RS256 + path: 01-Authorization-RS256 locale: ja-JP --- # Express.js APIアプリケーションに認可を追加する -

このガイドは、新規または既存のExpress.js APIアプリケーションにexpress-oauth2-jwt-bearerパッケージを使ってAuth0を統合する方法を説明します。

Auth0 DashboardでAPIをまだ作成していない場合は、対話型のセレクターを使ってAuth0 APIを新規作成します。そうでない場合は、既存のプロジェクトAPIを選択します。

Auth0 Dashboardを使って初めてAPIをセットアップする場合には、使用の開始ガイドを確認してください。それぞれのAuth0 APIにはAPI識別子があり、アプリケーションにアクセストークンの検証で使用されます。

Auth0を初めてご利用ですか?Auth0の仕組みと、OAuth 2.0フレームワークを用いたAPI認証と認可の実装について説明します。

+

このガイドは、新規または既存のExpress.js APIアプリケーションにexpress-oauth2-jwt-bearerパッケージを使ってAuth0を統合する方法を説明します。

Auth0 DashboardでAPIをまだ作成していない場合は、対話型のセレクターを使ってAuth0 APIを新規作成します。そうでない場合は、既存のプロジェクトAPIを選択します。

Auth0 Dashboardを使って初めてAPIをセットアップする場合には、使用の開始ガイドを確認してください。それぞれのAuth0 APIにはAPI識別子があり、アプリケーションにアクセストークンの検証で使用されます。

Auth0を初めてご利用ですか?Auth0の仕組みと、OAuth 2.0フレームワークを用いたAPI認証と認可の実装について説明します。

## アクセス許可を定義する -

アクセス許可は、ユーザーの代わりに、提供されたアクセストークンを使ってどのようにしてリソースにアクセスできるのかを定義できるようにします。たとえば、ユーザーがマネージャーアクセスレベルを持つ場合には、messagesリソースに対して読み出しアクセスを付与し、管理者アクセスレベルを持つ場合には、書き込みアクセスを付与することができます。

Auth0 Dashboardの[APIs]セクションにある[Permissions(権限)]ビューで使用可能なアクセス許可を定義することができます。

null

以下の例ではread:messagesスコープを使用します。

+

アクセス許可は、ユーザーの代わりに、提供されたアクセストークンを使ってどのようにしてリソースにアクセスできるのかを定義できるようにします。たとえば、ユーザーがマネージャーアクセスレベルを持つ場合には、messagesリソースに対して読み出しアクセスを付与し、管理者アクセスレベルを持つ場合には、書き込みアクセスを付与することができます。

Auth0 Dashboardの[APIs]セクションにある[Permissions(権限)]ビューで使用可能なアクセス許可を定義することができます。

null

以下の例ではread:messagesスコープを使用します。

## 依存関係をインストールする @@ -36,18 +36,282 @@ locale: ja-JP ## APIエンドポイントを保護する {{{ data-action="code" data-code="server.js#12:32" }}} -

有効なJWTを必須して個々のルートを保護するには、express-oauth2-jwt-bearerから構築されたcheckJwtミドルウェアでルートを構成します。

特定のスコープを検索するために、個々のルートを構成することができます。これを実現するには、requiresScopeメソッドで別のミドルウェアをセットアップします。必要なスコープを提供し、認可を追加したいルートにミドルウェアを適用します。

checkJwtrequiredScopesミドルウェアを保護したいルートに渡します。

この構成では、read:messagesスコープを持つアクセストークンのみがエンドポイントにアクセスすることができます。

APIを呼び出す

APIを呼び出すにはアクセストークンが必要です。テスト用のアクセストークンは、API設定[Test(テスト)]ビューから取得することができます。

null

要求のAuthorizationヘッダーにアクセストークンを指定します。

curl --request GET \
+

有効なJWTを必須して個々のルートを保護するには、express-oauth2-jwt-bearerから構築されたcheckJwtミドルウェアでルートを構成します。

特定のスコープを検索するために、個々のルートを構成することができます。これを実現するには、requiresScopeメソッドで別のミドルウェアをセットアップします。必要なスコープを提供し、認可を追加したいルートにミドルウェアを適用します。

checkJwtrequiredScopesミドルウェアを保護したいルートに渡します。

この構成では、read:messagesスコープを持つアクセストークンのみがエンドポイントにアクセスすることができます。

APIを呼び出す

APIを呼び出すにはアクセストークンが必要です。テスト用のアクセストークンは、API設定[Test(テスト)]ビューから取得することができます。

null

要求のAuthorizationヘッダーにアクセストークンを指定します。


 
-  --url http://${account.namespace}/api_path \
+
+ + + + + + + +
curl --request get \
+
+  --url http:///%7ByourDomain%7D/api_path \
+
+  --header 'authorization: Bearer YOUR_ACCESS_TOKEN_HERE'
var client = new RestClient("http:///%7ByourDomain%7D/api_path");
+
+var request = new RestRequest(Method.GET);
+
+request.AddHeader("authorization", "Bearer YOUR_ACCESS_TOKEN_HERE");
+
+IRestResponse response = client.Execute(request);
package main
+
+
+
+import (
+
+ "fmt"
+
+ "net/http"
+
+ "io/ioutil"
+
+)
+
+
+
+func main() {
+
+
+
+ url := "http:///%7ByourDomain%7D/api_path"
+
+
+
+ req, _ := http.NewRequest("get", url, nil)
+
+
+
+ req.Header.Add("authorization", "Bearer YOUR_ACCESS_TOKEN_HERE")
+
+
+
+ res, _ := http.DefaultClient.Do(req)
+
+
+
+ defer res.Body.Close()
+
+ body, _ := ioutil.ReadAll(res.Body)
+
+
+
+ fmt.Println(res)
+
+ fmt.Println(string(body))
+
+
+
+}
HttpResponse<String> response = Unirest.get("http:///%7ByourDomain%7D/api_path")
+
+  .header("authorization", "Bearer YOUR_ACCESS_TOKEN_HERE")
+
+  .asString();
var axios = require("axios").default;
+
+
+
+var options = {
+
+  method: 'get',
+
+  url: 'http:///%7ByourDomain%7D/api_path',
+
+  headers: {authorization: 'Bearer YOUR_ACCESS_TOKEN_HERE'}
+
+};
+
+
+
+axios.request(options).then(function (response) {
+
+  console.log(response.data);
+
+}).catch(function (error) {
+
+  console.error(error);
+
+});
#import <Foundation/Foundation.h>
+
+
+
+NSDictionary *headers = @{ @"authorization": @"Bearer YOUR_ACCESS_TOKEN_HERE" };
+
+
+
+NSMutableURLRequest *request = [NSMutableURLRequest requestWithURL:[NSURL URLWithString:@"http:///%7ByourDomain%7D/api_path"]
+
+                                                       cachePolicy:NSURLRequestUseProtocolCachePolicy
+
+                                                   timeoutInterval:10.0];
+
+[request setHTTPMethod:@"get"];
+
+[request setAllHTTPHeaderFields:headers];
+
+
+
+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];
$curl = curl_init();
+
+
+
+curl_setopt_array($curl, [
+
+  CURLOPT_URL => "http:///%7ByourDomain%7D/api_path",
+
+  CURLOPT_RETURNTRANSFER => true,
+
+  CURLOPT_ENCODING => "",
+
+  CURLOPT_MAXREDIRS => 10,
+
+  CURLOPT_TIMEOUT => 30,
+
+  CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
+
+  CURLOPT_CUSTOMREQUEST => "get",
+
+  CURLOPT_HTTPHEADER => [
+
+    "authorization: Bearer YOUR_ACCESS_TOKEN_HERE"
+
+  ],
+
+]);
+
+
+
+$response = curl_exec($curl);
+
+$err = curl_error($curl);
+
+
+
+curl_close($curl);
+
+
+
+if ($err) {
+
+  echo "cURL Error #:" . $err;
+
+} else {
+
+  echo $response;
+
+}
import http.client
+
+
+
+conn = http.client.HTTPConnection("")
+
+
+
+headers = { 'authorization': "Bearer YOUR_ACCESS_TOKEN_HERE" }
+
+
+
+conn.request("get", "%7ByourDomain%7D/api_path", headers=headers)
+
+
+
+res = conn.getresponse()
+
+data = res.read()
+
+
+
+print(data.decode("utf-8"))
require 'uri'
+
+require 'net/http'
+
+
+
+url = URI("http:///%7ByourDomain%7D/api_path")
+
+
+
+http = Net::HTTP.new(url.host, url.port)
+
+
+
+request = Net::HTTP::Get.new(url)
+
+request["authorization"] = 'Bearer YOUR_ACCESS_TOKEN_HERE'
+
+
+
+response = http.request(request)
+
+puts response.read_body
import Foundation
+
+
+
+let headers = ["authorization": "Bearer YOUR_ACCESS_TOKEN_HERE"]
+
+
+
+let request = NSMutableURLRequest(url: NSURL(string: "http:///%7ByourDomain%7D/api_path")! as URL,
+
+                                        cachePolicy: .useProtocolCachePolicy,
+
+                                    timeoutInterval: 10.0)
+
+request.httpMethod = "get"
+
+request.allHTTPHeaderFields = headers
+
+
+
+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()
- --header 'authorization: Bearer YOUR_ACCESS_TOKEN_HERE' -

Node JS API手順4「チェックポイント」

アプリケーションの構成が完了したら、アプリケーションを実行して次の点を確認します:

  • GET /api/publicが認証を必要としない要求に使用できる。

  • GET /api/privateが認証された要求に使用できる。

  • GET /api/private-scopedread:messagesスコープが付与されたアクセストークンを含む認証された要求に使用できる。

-

If your application did not start successfully:

  • Verify you added the token as the Authorization header

  • Ensure the token has the correct scopes. Verify with jwt.io.

Still having issues? Check out our documentation or visit our community page to get more help.

+

アプリケーションが正常に起動しなかった場合は以下を行います。

  • トークンをAuthorizationヘッダーに含めて追加したことを確認します。

  • トークンに正しいスコープがあることを確認します。確認にはjwt.ioを使用します。

まだお困りですか?当社提供のドキュメントまたはコミュニティページで詳しい情報を確認してください。

diff --git a/ja-jp/articles/quickstart/backend/php/interactive.md b/ja-jp/articles/quickstart/backend/php/interactive.md index f788ec3f89..9e408ca0f0 100644 --- a/ja-jp/articles/quickstart/backend/php/interactive.md +++ b/ja-jp/articles/quickstart/backend/php/interactive.md @@ -6,7 +6,7 @@ files: - files/index - files/router github: - path: https://github.com/auth0-samples/auth0-php-api-samples/tree/main/app + path: app locale: ja-JP --- @@ -18,12 +18,12 @@ locale: ja-JP ## Auth0を構成する -

Auth0のサービスを利用するには、Auth0 Dashboadに登録済みのアプリケーションがある必要があります。Auth0アプリケーションは、プロジェクトに対してどのように認証が動作して欲しいかを構成する場所です。

アプリケーションを構成する

対話型のセレクターを使ってAuth0アプリケーションを新規作成するか、統合したいプロジェクトを表す既存のアプリケーションを選択します。Auth0のすべてのアプリケーションには英数字からなる一意のクライアントIDが割り当てられており、アプリケーションのコードがSDKを通じてAuth0 APIを呼び出す際に使用されます。

このクイックスタートを使って構成されたすべての設定は、Dashboardのアプリケーションを自動更新します。今後、アプリケーションの管理もDashboardで行えます。

代わりに完了済みの構成を見てみたい場合は、サンプルアプリケーションをご覧ください。

APIを構成する

同様に、Auth0 APIを新規作成するか、Dashboardから統合するプロジェクトを表す既存のAPIを使用する必要があります。APIに一意の識別子を選択して記録します。以下のアプリケーションを構成するには、その識別子が必要です。

+

Auth0のサービスを利用するには、Auth0 Dashboadに登録済みのアプリケーションがある必要があります。Auth0アプリケーションは、プロジェクトに対してどのように認証が動作して欲しいかを構成する場所です。

アプリケーションを構成する

対話型のセレクターを使ってAuth0アプリケーションを新規作成するか、統合したいプロジェクトを表す既存のアプリケーションを選択します。Auth0のすべてのアプリケーションには英数字からなる一意のクライアントIDが割り当てられており、アプリケーションのコードがSDKを通じてAuth0 APIを呼び出す際に使用されます。

このクイックスタートを使って構成されたすべての設定は、Dashboardのアプリケーションを自動更新します。今後、アプリケーションの管理もDashboardで行えます。

代わりに完了済みの構成を見てみたい場合は、サンプルアプリケーションをご覧ください。

APIを構成する

同様に、Auth0 APIを新規作成するか、Dashboardから統合するプロジェクトを表す既存のAPIを使用する必要があります。APIに一意の識別子を選択して記録します。以下のアプリケーションを構成するには、その識別子が必要です。

## Auth0 PHP SDKをインストールする {{{ data-action="code" data-code="index.php" }}} -

PHPアプリで、Auth0の認証・認可を手軽に実装できるように、Auth0はPHP SDK(Auth0-PHP)を提供しています。

Auth0 PHP SDKでは、ネットワーク要求を管理するために、PSR-17PSR-18対応HTTPライブラリーをインストールする必要があります。ライブラリーがない場合は、ターミナルで以下のコマンドを実行して、信頼できる選択肢をインストールすることができます:

cd <your-project-directory>
+

PHPアプリで、Auth0の認証・認可を手軽に実装できるように、Auth0はPHP SDK(Auth0-PHP)を提供しています。

Auth0 PHP SDKでは、ネットワーク要求を管理するために、PSR-17PSR-18対応HTTPライブラリーをインストールする必要があります。ライブラリーがない場合は、ターミナルで以下のコマンドを実行して、信頼できる選択肢をインストールすることができます:

cd <your-project-directory>
 
     composer require symfony/http-client nyholm/psr7
 
@@ -37,19 +37,19 @@ locale: ja-JP
 
   
-

Sorry about that. Here's a couple things to double check:

  • Make sure the correct application is selected.

  • Did you save after entering your URLs?

  • Make sure the domain and client ID imported correctly.

Still having issues? Check out our documentation or visit our community page to get more help.

+

すみません。いくつかの点をもう一度確認してください。

  • 正しいアプリケーションが選択されていることを確認します。

  • URLを入力した後で保存しましたか?

  • ドメインとクライアントIDが正常にインポートされていることを確認します。

まだお困りですか?当社提供のドキュメントまたはコミュニティページで詳しい情報を確認してください。

## ベアラートークンをリッスンする {{{ data-action="code" data-code="index.php#20:23" }}} -

次に、ベアラートークンを取得し処理するためにアプリケーションを拡張します。ベアラートークンはAPIに提供されるアクセストークンで、ユーザーに代わってクライアントからリクエストされます。アクセストークンは、アプリケーションでルートへのアクセスを承認または拒否します。これは、エンドポイント認可と呼ばれます。

リクエストからアクセストークンを取得する最も簡単な方法は、PHP SDKのgetBearerToken()メソッドを使用するものです。このメソッドは、GETパラメーター、POST本文、リクエストヘッダー、および他のソースからトークンを取得します。この場合、PHP SDKはtokenパラメーターのGETリクエスト、またはHTTP Authorizationヘッダーから渡されたトークンを処理します。

+

次に、ベアラートークンを取得し処理するためにアプリケーションを拡張します。ベアラートークンはAPIに提供されるアクセストークンで、ユーザーに代わってクライアントから要求されます。アクセストークンは、アプリケーションでルートへのアクセスを承認または拒否します。これは、エンドポイント認可と呼ばれます。

要求からアクセストークンを取得する最も簡単な方法は、PHP SDKのgetBearerToken()メソッドを使用するものです。このメソッドは、GETパラメーター、POST本文、要求ヘッダー、および他のソースからトークンを取得します。この場合、PHP SDKはtokenパラメーターのGET要求、またはHTTP Authorizationヘッダーから渡されたトークンを処理します。

## ルートを作成・構成する {{{ data-action="code" data-code="router.php" }}} -

次に、受信リクエストをアプリケーションにダイレクトするために、ルーティングライブラリーをインストールします。これは必須手順ではありませんが、本クイックスタートの目的上、アプリケーション構造が簡略化されます。

composer require steampixel/simple-php-router
+

次に、受信する要求をアプリケーションにダイレクトするために、ルーティングライブラリーをインストールします。これは必須手順ではありませんが、本クイックスタートの目的上、アプリケーション構造が簡略化されます。

composer require steampixel/simple-php-router
 
 
@@ -58,7 +58,7 @@ locale: ja-JP ## エンドポイント認可を構成する {{{ data-action="code" data-code="router.php#21:31" }}} -

Auth0アプリケーションとAuth0 PHP SDKを構成し、アプリケーションでリクエストからベアラートークンを取得したら、次の手順はプロジェクトにエンドポイント認可をセットアップすることです。上で実装したgetBearerToken()メソッドは、リクエストのアクセスに関する詳細を含むTokenクラスを返します。

getBearerToken()メソッドは受信リクエストを自動的に検証・確認するため、アプリケーションはメソッドの応答を評価することで、アクセストークンの詳細を判定します。応答がnullの場合、提供される有効なトークンはありません。そうでない場合は、応答の内容を検査し、リクエストの詳細を確認してください。

右のインタラクティブパネルで、応答がnullであるかどうかをチェックし、/api/privateルートへのアクセスをフィルターすることができます。

+

Auth0アプリケーションとAuth0 PHP SDKを構成し、アプリケーションで要求からベアラートークンを取得したら、次の手順はプロジェクトにエンドポイント認可をセットアップすることです。上で実装したgetBearerToken()メソッドは、要求のアクセスに関する詳細を含むTokenクラスを返します。

getBearerToken()メソッドは受信要求を自動的に検証・確認するため、アプリケーションはメソッドの応答を評価することで、アクセストークンの詳細を判定します。応答がnullの場合、提供される有効なトークンはありません。そうでない場合は、応答の内容を検査し、要求の詳細を確認してください。

右のインタラクティブパネルで、応答がnullであるかどうかをチェックし、/api/privateルートへのアクセスをフィルターすることができます。

## スコープで認可する {{{ data-action="code" data-code="router.php#33:48" }}} diff --git a/ja-jp/articles/quickstart/backend/python/interactive.md b/ja-jp/articles/quickstart/backend/python/interactive.md index 389cbe34fb..f8df3b4d79 100644 --- a/ja-jp/articles/quickstart/backend/python/interactive.md +++ b/ja-jp/articles/quickstart/backend/python/interactive.md @@ -6,19 +6,19 @@ files: - files/validator - files/server github: - path: https://github.com/auth0-samples/auth0-python-api-samples/tree/master/00-Starter-Seed + path: 00-Starter-Seed locale: ja-JP --- # Flask APIアプリケーションに認可を追加する -

このガイドは、Flaskを使ってビルドされた新規または既存のPython APIにAuth0を統合する方法を説明します。

Auth0 DashboardでAPIをまだ作成していない場合は、対話型のセレクターを使ってAuth0 APIを新規作成します。そうでない場合は、統合したいプロジェクトを表す既存のAPIを選択することができます。

または、Auth0 Dashboardを使って初めてAPIをセットアップする方法を使用の開始ガイドで確認することもできます。

Auth0にあるAPIはそれぞれAPI識別子を使って構成され、アプリケーションのコードはAPI識別子をオーディエンスとしてアクセストークンを検証します。

Auth0を初めてご利用ですか?Auth0の仕組みと、OAuth 2.0フレームワークを用いたAPI認証と認可の実装について説明します。

+

このガイドは、Flaskを使ってビルドされた新規または既存のPython APIにAuth0を統合する方法を説明します。

Auth0 DashboardでAPIをまだ作成していない場合は、対話型のセレクターを使ってAuth0 APIを新規作成します。そうでない場合は、統合したいプロジェクトを表す既存のAPIを選択することができます。

または、Auth0 Dashboardを使って初めてAPIをセットアップする方法を使用の開始ガイドで確認することもできます。

Auth0にあるAPIはそれぞれAPI識別子を使って構成され、アプリケーションのコードはAPI識別子をオーディエンスとしてアクセストークンを検証します。

Auth0を初めてご利用ですか?Auth0の仕組みと、OAuth 2.0フレームワークを用いたAPI認証と認可の実装について説明します。

## アクセス許可を定義する -

アクセス許可は、ユーザーの代わりに、提供されたアクセストークンを使ってどのようにしてリソースにアクセスできるのかを定義できるようにします。たとえば、ユーザーがマネージャーアクセスレベルを持つ場合には、messagesリソースに対して読み出しアクセスを付与し、管理者アクセスレベルを持つ場合には、書き込みアクセスを付与することができます。

Auth0 Dashboardの[APIs]セクションにある[Permissions(権限)]ビューで使用可能なアクセス許可を定義することができます。

[Auth0 Dashboard]>[Applications(アプリケーション)]>[APIs]>[Specific API(特定のAPI]>[Permissions(権限)]タブ

以下の例ではread:messagesスコープを使用します。

+

アクセス許可は、ユーザーの代わりに、提供されたアクセストークンを使ってどのようにしてリソースにアクセスできるのかを定義できるようにします。たとえば、ユーザーがマネージャーアクセスレベルを持つ場合には、messagesリソースに対して読み出しアクセスを付与し、管理者アクセスレベルを持つ場合には、書き込みアクセスを付与することができます。

Auth0 Dashboardの[APIs]セクションにある[Permissions(権限)]ビューで使用可能なアクセス許可を定義することができます。

[Auth0 Dashboard]>[Applications(アプリケーション)]>[APIs]>[Specific API(特定のAPI]>[Permissions(権限)]タブ

以下の例ではread:messagesスコープを使用します。

## 依存関係をインストールする @@ -38,17 +38,281 @@ locale: ja-JP ## JWTバリデーターを作成する {{{ data-action="code" data-code="validator.py" }}} -

Authlibという名前のライブラリーを使用して、ResourceProtectorを作成します。これはFlaskデコレーターの一種で、該当するバリデーターを使ってリソース(APIルート)を保護します。

バリデーターは、リソースに渡すアクセストークンに有効な署名とクレームがあることを検証します。

AuthLibのJWTBearerTokenValidatorバリデーターに多少の変更を加えて、アクセストークンの検証要件が満たされるようにします。

Auth0JWTBearerTokenValidatorを作成するには、domainaudience(API識別子)に渡すことが必要です。そうすると、トークンの署名を検証するのに必要な公開鍵が取得され、JWTBearerTokenValidatorクラスに渡されます。

そして、クラスのclaims_optionsをオーバーライドし、トークンのexpiry、audience、issueクレームが要件を満たして有効であることを確認します。

+

Authlibという名前のライブラリーを使用して、ResourceProtectorを作成します。これはFlaskデコレーターの一種で、該当するバリデーターを使ってリソース(APIルート)を保護します。

バリデーターは、リソースに渡すアクセストークンに有効な署名とクレームがあることを検証します。

AuthLibのJWTBearerTokenValidatorバリデーターに多少の変更を加えて、アクセストークンの検証要件が満たされるようにします。

Auth0JWTBearerTokenValidatorを作成するには、domainaudience(API識別子)に渡すことが必要です。そうすると、トークンの署名を検証するのに必要な公開鍵が取得され、JWTBearerTokenValidatorクラスに渡されます。

そして、クラスのclaims_optionsをオーバーライドし、トークンのexpiry、audience、issueクレームが要件を満たして有効であることを確認します。

## Flaskアプリケーションを作成する {{{ data-action="code" data-code="server.py" }}} -

次に、3つのAPIルートを使ってFlaskアプリケーションを作成します。

  • /api/public:認証を必要としないパブリックエンドポイントです。

  • /api/private:有効なJWTアクセストークンを必要とするプライベートエンドポイントです。

  • /api/private-scoped:与えられたscopeを含む有効なJWTアクセストークンを必要とするプライベートエンドポイントです。

保護されたルートにはrequire_authデコレーターがあり、これは、以前に作成したAuth0JWTBearerTokenValidatorを使用するResourceProtectorです。

Auth0JWTBearerTokenValidatorを作成するには、テナントのドメインと以前に作成したAPIのAPI識別子に渡します。

private_scopedルートのrequire_authデコレーターは、追加の引数である"read:messages"を受け付けます。これは、以前に作成したアクセス許可(スコープ)について、アクセストークンをチェックします。

APIを呼び出す

APIを呼び出すにはアクセストークンが必要です。テスト用のアクセストークンは、API設定[Test(テスト)]ビューから取得することができます。

[Auth0 Dashboard]>[Applications(アプリケーション)]>[API]>[Specific API(特定のAPI]>[Test(テスト)]タブ

要求のAuthorizationヘッダーにアクセストークンを指定します。

curl --request GET \
+

次に、3つのAPIルートを使ってFlaskアプリケーションを作成します。

  • /api/public:認証を必要としないパブリックエンドポイントです。

  • /api/private:有効なJWTアクセストークンを必要とするプライベートエンドポイントです。

  • /api/private-scoped:与えられたscopeを含む有効なJWTアクセストークンを必要とするプライベートエンドポイントです。

保護されたルートにはrequire_authデコレーターがあり、これは、以前に作成したAuth0JWTBearerTokenValidatorを使用するResourceProtectorです。

Auth0JWTBearerTokenValidatorを作成するには、テナントのドメインと以前に作成したAPIのAPI識別子に渡します。

private_scopedルートのrequire_authデコレーターは、追加の引数である"read:messages"を受け付けます。これは、以前に作成したアクセス許可(スコープ)について、アクセストークンをチェックします。

APIを呼び出す

APIを呼び出すにはアクセストークンが必要です。テスト用のアクセストークンは、API設定[Test(テスト)]ビューから取得することができます。

[Auth0 Dashboard]>[Applications(アプリケーション)]>[API]>[Specific API(特定のAPI]>[Test(テスト)]タブ

要求のAuthorizationヘッダーにアクセストークンを指定します。


 
-  --url http://${account.namespace}/api_path \
+
+ + + + + + + +
curl --request get \
+
+  --url 'http:///${account.namespace}/api_path' \
+
+  --header 'authorization: Bearer YOUR_ACCESS_TOKEN_HERE'
var client = new RestClient("http:///${account.namespace}/api_path");
+
+var request = new RestRequest(Method.GET);
+
+request.AddHeader("authorization", "Bearer YOUR_ACCESS_TOKEN_HERE");
+
+IRestResponse response = client.Execute(request);
package main
+
+
+
+import (
+
+ "fmt"
+
+ "net/http"
+
+ "io/ioutil"
+
+)
+
+
+
+func main() {
+
+
+
+ url := "http:///${account.namespace}/api_path"
+
+
+
+ req, _ := http.NewRequest("get", url, nil)
+
+
+
+ req.Header.Add("authorization", "Bearer YOUR_ACCESS_TOKEN_HERE")
+
+
+
+ res, _ := http.DefaultClient.Do(req)
+
+
+
+ defer res.Body.Close()
+
+ body, _ := ioutil.ReadAll(res.Body)
+
+
+
+ fmt.Println(res)
+
+ fmt.Println(string(body))
+
+
+
+}
HttpResponse<String> response = Unirest.get("http:///${account.namespace}/api_path")
+
+  .header("authorization", "Bearer YOUR_ACCESS_TOKEN_HERE")
+
+  .asString();
var axios = require("axios").default;
+
+
+
+var options = {
+
+  method: 'get',
+
+  url: 'http:///${account.namespace}/api_path',
+
+  headers: {authorization: 'Bearer YOUR_ACCESS_TOKEN_HERE'}
+
+};
+
+
+
+axios.request(options).then(function (response) {
+
+  console.log(response.data);
+
+}).catch(function (error) {
+
+  console.error(error);
+
+});
#import <Foundation/Foundation.h>
+
+
+
+NSDictionary *headers = @{ @"authorization": @"Bearer YOUR_ACCESS_TOKEN_HERE" };
+
+
+
+NSMutableURLRequest *request = [NSMutableURLRequest requestWithURL:[NSURL URLWithString:@"http:///${account.namespace}/api_path"]
+
+                                                       cachePolicy:NSURLRequestUseProtocolCachePolicy
+
+                                                   timeoutInterval:10.0];
+
+[request setHTTPMethod:@"get"];
+
+[request setAllHTTPHeaderFields:headers];
+
+
+
+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];
$curl = curl_init();
+
+
+
+curl_setopt_array($curl, [
+
+  CURLOPT_URL => "http:///${account.namespace}/api_path",
+
+  CURLOPT_RETURNTRANSFER => true,
+
+  CURLOPT_ENCODING => "",
+
+  CURLOPT_MAXREDIRS => 10,
+
+  CURLOPT_TIMEOUT => 30,
+
+  CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
+
+  CURLOPT_CUSTOMREQUEST => "get",
+
+  CURLOPT_HTTPHEADER => [
+
+    "authorization: Bearer YOUR_ACCESS_TOKEN_HERE"
+
+  ],
+
+]);
+
+
+
+$response = curl_exec($curl);
+
+$err = curl_error($curl);
+
+
+
+curl_close($curl);
+
+
+
+if ($err) {
+
+  echo "cURL Error #:" . $err;
+
+} else {
+
+  echo $response;
+
+}
import http.client
+
+
+
+conn = http.client.HTTPConnection("")
+
+
+
+headers = { 'authorization': "Bearer YOUR_ACCESS_TOKEN_HERE" }
+
+
+
+conn.request("get", "/${account.namespace}/api_path", headers=headers)
+
+
+
+res = conn.getresponse()
+
+data = res.read()
+
+
+
+print(data.decode("utf-8"))
require 'uri'
+
+require 'net/http'
+
+
+
+url = URI("http:///${account.namespace}/api_path")
+
+
+
+http = Net::HTTP.new(url.host, url.port)
+
+
+
+request = Net::HTTP::Get.new(url)
+
+request["authorization"] = 'Bearer YOUR_ACCESS_TOKEN_HERE'
+
+
+
+response = http.request(request)
+
+puts response.read_body
import Foundation
+
+
+
+let headers = ["authorization": "Bearer YOUR_ACCESS_TOKEN_HERE"]
+
+
+
+let request = NSMutableURLRequest(url: NSURL(string: "http:///${account.namespace}/api_path")! as URL,
+
+                                        cachePolicy: .useProtocolCachePolicy,
+
+                                    timeoutInterval: 10.0)
+
+request.httpMethod = "get"
+
+request.allHTTPHeaderFields = headers
+
+
+
+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()
- --header 'authorization: Bearer YOUR_ACCESS_TOKEN_HERE' -

diff --git a/ja-jp/articles/quickstart/backend/rails/interactive.md b/ja-jp/articles/quickstart/backend/rails/interactive.md index 7f0fd69d9c..901b386230 100644 --- a/ja-jp/articles/quickstart/backend/rails/interactive.md +++ b/ja-jp/articles/quickstart/backend/rails/interactive.md @@ -9,19 +9,19 @@ files: - files/app/controllers/public_controller - files/app/controllers/private_controller github: - path: https://github.com/auth0-samples/auth0-rubyonrails-api-samples/tree/master/01-Authentication-RS256 + path: 01-Authentication-RS256 locale: ja-JP --- # Ruby on Rails APIに認可を追加する -

このチュートリアルでは、カスタムAuth0Clientクラス内のjwt Gemを使って、アクセストークンの検証を実施します。Securedと呼ばれるConcernを使って、受信アクセストークンからの認証を必要とするエンドポイントを認可します。

Auth0 DashboardでAPIをまだ作成していない場合は、対話型のセレクターを使ってAuth0 APIを新規作成します。そうでない場合は、プロジェクトに既存のAPIを選択します。

Auth0 Dashboardを使って初めてAPIをセットアップする場合には、使用の開始ガイドを確認してください。

それぞれのAuth0 APIにはAPI識別子があり、アプリケーションにアクセストークンの検証で使用されます。

Auth0を初めてご利用ですか?Auth0の仕組みと、OAuth 2.0フレームワークを用いたAPI認証と認可の実装について説明します。

+

このチュートリアルでは、カスタムAuth0Clientクラス内のjwt Gemを使って、アクセストークンの検証を実施します。Securedと呼ばれるConcernを使って、受信アクセストークンからの認証を必要とするエンドポイントを認可します。

Auth0 DashboardでAPIをまだ作成していない場合は、対話型のセレクターを使ってAuth0 APIを新規作成します。そうでない場合は、プロジェクトに既存のAPIを選択します。

Auth0 Dashboardを使って初めてAPIをセットアップする場合には、使用の開始ガイドを確認してください。

それぞれのAuth0 APIにはAPI識別子があり、アプリケーションにアクセストークンの検証で使用されます。

Auth0を初めてご利用ですか?Auth0の仕組みと、OAuth 2.0フレームワークを用いたAPI認証と認可の実装について説明します。

## アクセス許可を定義する -

アクセス許可は、ユーザーの代わりに、提供されたアクセストークンを使ってどのようにしてリソースにアクセスできるのかを定義できるようにします。たとえば、ユーザーがマネージャーアクセスレベルを持つ場合には、messagesリソースに対して読み出しアクセスを付与し、管理者アクセスレベルを持つ場合には、書き込みアクセスを付与することができます。

Auth0 Dashboardの[APIs]セクションにある[Permissions(権限)]ビューで使用可能なアクセス許可を定義することができます。

[Auth0 Dashboard]>[Applications(アプリケーション)]>[APIs]>[Specific API(特定のAPI]>[Permissions(権限)]タブ

以下の例ではread:messagesスコープを使用します。

+

アクセス許可は、ユーザーの代わりに、提供されたアクセストークンを使ってどのようにしてリソースにアクセスできるのかを定義できるようにします。たとえば、ユーザーがマネージャーアクセスレベルを持つ場合には、messagesリソースに対して読み出しアクセスを付与し、管理者アクセスレベルを持つ場合には、書き込みアクセスを付与することができます。

Auth0 Dashboardの[APIs]セクションにある[Permissions(権限)]ビューで使用可能なアクセス許可を定義することができます。

[Auth0 Dashboard]>[Applications(アプリケーション)]>[APIs]>[Specific API(特定のAPI]>[Permissions(権限)]タブ

以下の例ではread:messagesスコープを使用します。

## 依存関係をインストールする @@ -37,12 +37,12 @@ locale: ja-JP ## Auth0Clientクラスを作成する {{{ data-action="code" data-code="app/controllers/concerns/secured.rb" }}} -

Auth0Clientと呼ばれるクラスを作成します。このクラスは、リクエストのAuthorizationヘッダーから得た受信アクセストークンをデコードし検証します。

Auth0ClientクラスはAuth0テナントの公開鍵を取得し、これを使ってアクセストークンの署名を検証します。Token構造体はvalidate_permissionsメソッドを定義し、必要なスコープの配列を指定してアクセストークン内の特定のscopeを検索し、トークンのペイロードに存在するかを確認します。

+

Auth0Clientと呼ばれるクラスを作成します。このクラスは要求のAuthorizationヘッダーから得た受信アクセストークンをデコードし検証します。

Auth0ClientクラスはAuth0テナントの公開鍵を取得し、これを使ってアクセストークンの署名を検証します。Token構造体はvalidate_permissionsメソッドを定義し、必要なスコープの配列を指定してアクセストークン内の特定のscopeを検索し、トークンのペイロードに存在するかを確認します。

## Secured concernを定義する {{{ data-action="code" data-code="app/controllers/concerns/secured.rb" }}} -

受信リクエストのAuthorizationヘッダー内でアクセストークンを検索するSecuredと呼ばれるConcernを作成します。

トークンが存在する場合、Auth0Client.validate_tokenjwt Gemを使用してトークンの署名を確認し、トークンのクレームを検証します。

Concernには、アクセストークンが有効であることを検証するほか、トークンにリクエストされたリソースにアクセスするのに十分なスコープがあることを確認するためのメカニズムも整備されています。この例では、Auth0ClientクラスからToken.validate_permissionsメソッドを呼び出すことで、ブロックを受け取りアクセス許可を確認するvalidate_permissionsメソッドを定義します。

/private-scopedルートでは、定義されたスコープはペイロードに入ってくるスコープと交差され、別の配列から1つ以上の項目が含まれているかを判定します。

+

受信要求のAuthorizationヘッダー内でアクセストークンを検索するSecuredと呼ばれるConcernを作成します。

トークンが存在する場合、Auth0Client.validate_tokenjwt Gemを使用してトークンの署名を確認し、トークンのクレームを検証します。

Concernには、アクセストークンが有効であることを検証するほか、トークンに要求されたリソースにアクセスするのに十分なスコープがあることを確認するためのメカニズムも整備されています。この例では、Auth0ClientクラスからToken.validate_permissionsメソッドを呼び出すことで、ブロックを受け取りアクセス許可を確認するvalidate_permissionsメソッドを定義します。

/private-scopedルートでは、定義されたスコープはペイロードに入ってくるスコープと交差され、別の配列から1つ以上の項目が含まれているかを判定します。

## ApplicationControllerにSecure concernを含める {{{ data-action="code" data-code="app/controllers/application_controller.rb" }}} @@ -57,18 +57,282 @@ locale: ja-JP ## プライベートエンドポイントを作成する {{{ data-action="code" data-code="app/controllers/private_controller.rb" }}} -

/api/private/api/private-scopedというプライベートエンドポイントを処理するようにコントローラーを作成します。

/api/privateは、追加スコープのないアクセストークンを含む認証された要求に使用することができます。

/api/private-scopedは、read:messagesスコープが付与されたアクセストークンを含む認証された要求に使用することができます。

保護されたエンドポイントはSecured concernからauthorizeメソッドを呼び出す必要があります。そのためには、before_action :authorizeを使用します。これによって、Secured.authorizeメソッドがPrivateControllerの各アクションの前に呼び出されます。

APIを呼び出す

APIを呼び出すにはアクセストークンが必要です。テスト用のアクセストークンは、API設定[Test(テスト)]ビューから取得することができます。

[Auth0 Dashboard]>[Applications(アプリケーション)]>[API]>[Specific API(特定のAPI]>[Test(テスト)]タブ

要求のAuthorizationヘッダーにアクセストークンを指定します。

curl --request GET \
+

/api/private/api/private-scopedというプライベートエンドポイントを処理するようにコントローラーを作成します。

/api/privateは、追加スコープのないアクセストークンを含む認証された要求に使用することができます。

/api/private-scopedは、read:messagesスコープが付与されたアクセストークンを含む認証された要求に使用することができます。

保護されたエンドポイントはSecured concernからauthorizeメソッドを呼び出す必要があります。そのためには、before_action :authorizeを使用します。これによって、Secured.authorizeメソッドがPrivateControllerの各アクションの前に呼び出されます。

APIを呼び出す

APIを呼び出すにはアクセストークンが必要です。テスト用のアクセストークンは、API設定[Test(テスト)]ビューから取得することができます。

[Auth0 Dashboard]>[Applications(アプリケーション)]>[API]>[Specific API(特定のAPI]>[Test(テスト)]タブ

要求のAuthorizationヘッダーにアクセストークンを指定します。


 
-  --url http://${account.namespace}/api_path \
+
+ + + + + + + +
curl --request get \
+
+  --url 'http:///${account.namespace}/api_path' \
+
+  --header 'authorization: Bearer YOUR_ACCESS_TOKEN_HERE'
var client = new RestClient("http:///${account.namespace}/api_path");
+
+var request = new RestRequest(Method.GET);
+
+request.AddHeader("authorization", "Bearer YOUR_ACCESS_TOKEN_HERE");
+
+IRestResponse response = client.Execute(request);
package main
+
+
+
+import (
+
+ "fmt"
+
+ "net/http"
+
+ "io/ioutil"
+
+)
+
+
+
+func main() {
+
+
+
+ url := "http:///${account.namespace}/api_path"
+
+
+
+ req, _ := http.NewRequest("get", url, nil)
+
+
+
+ req.Header.Add("authorization", "Bearer YOUR_ACCESS_TOKEN_HERE")
+
+
+
+ res, _ := http.DefaultClient.Do(req)
+
+
+
+ defer res.Body.Close()
+
+ body, _ := ioutil.ReadAll(res.Body)
+
+
+
+ fmt.Println(res)
+
+ fmt.Println(string(body))
+
+
+
+}
HttpResponse<String> response = Unirest.get("http:///${account.namespace}/api_path")
+
+  .header("authorization", "Bearer YOUR_ACCESS_TOKEN_HERE")
+
+  .asString();
var axios = require("axios").default;
+
+
+
+var options = {
+
+  method: 'get',
+
+  url: 'http:///${account.namespace}/api_path',
+
+  headers: {authorization: 'Bearer YOUR_ACCESS_TOKEN_HERE'}
+
+};
+
+
+
+axios.request(options).then(function (response) {
+
+  console.log(response.data);
+
+}).catch(function (error) {
+
+  console.error(error);
+
+});
#import <Foundation/Foundation.h>
+
+
+
+NSDictionary *headers = @{ @"authorization": @"Bearer YOUR_ACCESS_TOKEN_HERE" };
+
+
+
+NSMutableURLRequest *request = [NSMutableURLRequest requestWithURL:[NSURL URLWithString:@"http:///${account.namespace}/api_path"]
+
+                                                       cachePolicy:NSURLRequestUseProtocolCachePolicy
+
+                                                   timeoutInterval:10.0];
+
+[request setHTTPMethod:@"get"];
+
+[request setAllHTTPHeaderFields:headers];
+
+
+
+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];
$curl = curl_init();
+
+
+
+curl_setopt_array($curl, [
+
+  CURLOPT_URL => "http:///${account.namespace}/api_path",
+
+  CURLOPT_RETURNTRANSFER => true,
+
+  CURLOPT_ENCODING => "",
+
+  CURLOPT_MAXREDIRS => 10,
+
+  CURLOPT_TIMEOUT => 30,
+
+  CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
+
+  CURLOPT_CUSTOMREQUEST => "get",
+
+  CURLOPT_HTTPHEADER => [
+
+    "authorization: Bearer YOUR_ACCESS_TOKEN_HERE"
+
+  ],
+
+]);
+
+
+
+$response = curl_exec($curl);
+
+$err = curl_error($curl);
+
+
+
+curl_close($curl);
+
+
+
+if ($err) {
+
+  echo "cURL Error #:" . $err;
+
+} else {
+
+  echo $response;
+
+}
import http.client
+
+
+
+conn = http.client.HTTPConnection("")
+
+
+
+headers = { 'authorization': "Bearer YOUR_ACCESS_TOKEN_HERE" }
+
+
+
+conn.request("get", "/${account.namespace}/api_path", headers=headers)
+
+
+
+res = conn.getresponse()
+
+data = res.read()
+
+
+
+print(data.decode("utf-8"))
require 'uri'
+
+require 'net/http'
+
+
+
+url = URI("http:///${account.namespace}/api_path")
+
+
+
+http = Net::HTTP.new(url.host, url.port)
+
+
+
+request = Net::HTTP::Get.new(url)
+
+request["authorization"] = 'Bearer YOUR_ACCESS_TOKEN_HERE'
+
+
+
+response = http.request(request)
+
+puts response.read_body
import Foundation
+
+
+
+let headers = ["authorization": "Bearer YOUR_ACCESS_TOKEN_HERE"]
+
+
+
+let request = NSMutableURLRequest(url: NSURL(string: "http:///${account.namespace}/api_path")! as URL,
+
+                                        cachePolicy: .useProtocolCachePolicy,
+
+                                    timeoutInterval: 10.0)
+
+request.httpMethod = "get"
+
+request.allHTTPHeaderFields = headers
+
+
+
+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()
- --header 'authorization: Bearer YOUR_ACCESS_TOKEN_HERE' -

Ruby on rails手順7「チェックポイント」

アプリケーションの構成が完了したら、アプリケーションを実行して次の点を確認します:

  • GET /api/publicが認証を必要としない要求に使用できる。

  • GET /api/privateが認証された要求に使用できる。

  • GET /api/private-scopedread:messagesスコープが付与されたアクセストークンを含む認証された要求に使用できる。

-

If your application did not start successfully:

  • Verify you added the token as the Authorization header

  • Ensure the token has the correct scopes. Verify with jwt.io.

Still having issues? Check out our documentation or visit our community page to get more help.

+

アプリケーションが正常に起動しなかった場合は以下を行います。

  • トークンをAuthorizationヘッダーに含めて追加したことを確認します。

  • トークンに正しいスコープがあることを確認します。確認にはjwt.ioを使用します。

まだお困りですか?当社提供のドキュメントまたはコミュニティページで詳しい情報を確認してください。

diff --git a/ja-jp/articles/quickstart/backend/webapi-owin/interactive.md b/ja-jp/articles/quickstart/backend/webapi-owin/interactive.md index 55317245c5..ab14fd0fd0 100644 --- a/ja-jp/articles/quickstart/backend/webapi-owin/interactive.md +++ b/ja-jp/articles/quickstart/backend/webapi-owin/interactive.md @@ -8,7 +8,7 @@ files: - files/ScopeAuthorizeAttribute - files/ApiController github: - path: https://github.com/auth0-samples/auth0-aspnet-owin-webapi-samples/tree/master/Quickstart/Sample + path: Quickstart/Sample locale: ja-JP --- @@ -20,7 +20,7 @@ locale: ja-JP ## アクセス許可を定義する -

アクセス許可は、ユーザーの代わりに、提供されたアクセストークンを使ってどのようにしてリソースにアクセスできるのかを定義できるようにします。たとえば、ユーザーがマネージャーアクセスレベルを持つ場合には、messagesリソースに対して読み取りアクセスを付与し、管理者アクセスレベルを持つ場合には、書き込みアクセスを付与することができます。

Auth0 Dashboardの[API]セクションにある[Permissions(権限)]ビューで使用可能なアクセス許可を定義することができます。以下の例ではread:messagesスコープを使用します。

[Auth0 Dashboard]>[Applications(アプリケーション)]>[APIs]>[Specific API(特定のAPI]>[Permissions(権限)]タブ

+

アクセス許可は、ユーザーの代わりに、提供されたアクセストークンを使ってどのようにしてリソースにアクセスできるのかを定義できるようにします。たとえば、ユーザーがマネージャーアクセスレベルを持つ場合には、messagesリソースに対して読み取りアクセスを付与し、管理者アクセスレベルを持つ場合には、書き込みアクセスを付与することができます。

Auth0 Dashboardの[API]セクションにある[Permissions(権限)]ビューで使用可能なアクセス許可を定義することができます。以下の例ではread:messagesスコープを使用します。

[Auth0 Dashboard]>[Applications(アプリケーション)]>[APIs]>[Specific API(特定のAPI]>[Permissions(権限)]タブ

## 依存関係をインストールする @@ -53,6 +53,6 @@ locale: ja-JP
-

If your application did not start successfully:

  • Ensure your configured the ValidIssuer and ValidAudience values correctly

  • Verify you added the token as the Authorization header

  • Ensure the token has the correct scopes. Verify with jwt.io.

Still having issues? Check out our documentation or visit our community page to get more help.

+

アプリケーションが正常に起動しなかった場合は以下を行います。

  • ValidIssuerValidAudienceの値が正しく構成されていることを確認します。

  • トークンをAuthorizationヘッダーに含めて追加したことを確認します。

  • トークンに正しいスコープがあることを確認します。確認にはjwt.ioを使用します。

まだお困りですか?当社提供のドキュメントまたはコミュニティページで詳しい情報を確認してください。

diff --git a/ja-jp/articles/quickstart/native/android-facebook-login/interactive.md b/ja-jp/articles/quickstart/native/android-facebook-login/interactive.md index abdb6d6c64..286877e3b5 100644 --- a/ja-jp/articles/quickstart/native/android-facebook-login/interactive.md +++ b/ja-jp/articles/quickstart/native/android-facebook-login/interactive.md @@ -10,19 +10,19 @@ files: - files/exchangeTokens - files/performLogin github: - path: https://github.com/auth0-samples/auth0-android-native-social-sample/tree/master/00-login-facebook + path: 00-login-facebook locale: ja-JP --- # Android - Facebookログイン -

このチュートリアルは、ネイティブFacebookログインを使用して、Androidアプリケーションにユーザーログインを追加する方法について説明します。ログインして、アカウント用に構成された例を参考にして、このクリックスタートに従うことをお勧めします。

システム要件

  • Android Studio 3.6.1

  • Android SDK 25

  • Emulator - Nexus 5X - Android 6.0

このチュートリアルは、Facebook SDKでログインを実装する方法について説明します。​

始める前に

  • FacebookログインSDKをインストールして構成します。https://developers.facebook.comでFacebookアプリの作成プロセスも行います。この手順が終了したら、Facebookログインが統合された状態でモバイルアプリが稼働しているはずです。

DashboardでFacebookネイティブサインインを使用するようにAuth0アプリケーションを構成します。「Facebookログインをネイティブアプリに追加する」を参照してください。この手順が終了したら、アプリケーションはFacebookネイティブログインを実装できるようになります。

+

このチュートリアルは、ネイティブFacebookログインを使用して、Androidアプリケーションにユーザーログインを追加する方法について説明します。ログインして、アカウント用に構成された例を参考にして、このクリックスタートに従うことをお勧めします。

システム要件

  • Android Studio 3.6.1

  • Android SDK 25

  • Emulator - Nexus 5X - Android 6.0

このチュートリアルは、Facebook SDKでログインを実装する方法について説明します。​

始める前に

  • FacebookログインSDKをインストールして構成します。https://developers.facebook.comでFacebookアプリの作成プロセスも行います。この手順が終了したら、Facebookログインが統合された状態でモバイルアプリが稼働しているはずです。

DashboardでFacebookネイティブサインインを使用するようにAuth0アプリケーションを構成します。「Facebookログインをネイティブアプリに追加する」を参照してください。この手順が終了したら、アプリケーションはFacebookネイティブログインを実装できるようになります。

## Facebookのアクセス許可を要求する -

アプリケーションでは既にFacebookでサインインすることができますが、リッチユーザープロファイルを確保するには、Facebookログインボタンがセットアップされたアクセス許可を更新する必要があります。

要求されたアクセス許可をpublic_profileemailに設定します。これで、アクセスリクエストがユーザーによって受け入れられたという前提で、ユーザーメールも応答の一部に含まれます。

loginButton.setPermissions(Arrays.asList("public_profile", "email"));

+

アプリケーションでは既にFacebookでサインインすることができますが、リッチユーザープロファイルを確保するには、Facebookログインボタンがセットアップされたアクセス許可を更新する必要があります。

要求されたアクセス許可をpublic_profileemailに設定します。これで、アクセス要求がユーザーによって受け入れられたという前提で、ユーザーメールも応答の一部に含まれます。

loginButton.setPermissions(Arrays.asList("public_profile", "email"));

## performLoginメソッドを作成する {{{ data-action="code" data-code="performLogin + SimpleCallback" }}} @@ -37,7 +37,7 @@ locale: ja-JP ## Facebookを統合する -

Auth0でFacebookを使ってサインインすると、バックエンドはユーザーが主張する通りの本人であることを確認するために、バックグラウンドで確認作業を実施します。これを実現するには、セッションアクセストークンを提供する必要があります。

さらに、このFacebookユーザーを表すために、ユーザーをAuth0で作成する必要がある場合、バックエンドでは姓名やメールなどの一部の情報が必要になります。Auth0ユーザープロファイルでは、メールは(提供された場合)未検証としてフラグが付けられます。

セッションアクセストークンとユーザープロファイルを取得するには、Facebook APIに対してさらに2つのリクエストを行う必要があります。

+

Auth0でFacebookを使ってサインインすると、バックエンドはユーザーが主張する通りの本人であることを確認するために、バックグラウンドで確認作業を実施します。これを実現するには、セッションアクセストークンを提供する必要があります。

さらに、このFacebookユーザーを表すために、ユーザーをAuth0で作成する必要がある場合、バックエンドでは姓名やメールなどの一部の情報が必要になります。Auth0ユーザープロファイルでは、メールは(提供された場合)未検証としてフラグが付けられます。

セッションアクセストークンとユーザープロファイルを取得するには、Facebook APIに対してさらに2つの要求を行う必要があります。

## Facebookセッションアクセストークンを取得する {{{ data-action="code" data-code="fetchSessionToken" }}} @@ -52,7 +52,7 @@ locale: ja-JP ## Auth0を統合する -

必要なアーティファクトを取得したら、IDやアクセストークンなどAuth0のユーザー資格情報に交換する準備ができました。しかしまず、その最後の要求を行うためにAuth0 SDKをセットアップする必要があります。

アプリケーションキーを取得する

  1. Auth0 Dashboard[Applications(アプリケーション)]セクションで、[Sign in with Facebook(Facebookでサインイン)]を有効にした既存のアプリケーションを選択します。この手順で不明な点があれば、この記事の上に記載された要件セクションを確認してください。

  2. アプリケーションの設定ページから[Domain(ドメイン)][Client ID(クライアントID)]の値をコピーします。これらはSDKで必要です。

  3. Androidアプリケーションのstrings.xmlファイルで2つの新しいリソースを作成して保存します。キーの名前は以下で使用するキーと一致しなければなりません。

    <resources>
    +

    必要なアーティファクトを取得したら、IDやアクセストークンなどAuth0のユーザー資格情報に交換する準備ができました。しかしまず、その最後の要求を行うためにAuth0 SDKをセットアップする必要があります。

    アプリケーションキーを取得する

    1. Auth0 Dashboard[Applications(アプリケーション)]セクションで、[Sign in with Facebook(Facebookでサインイン)]を有効にした既存のアプリケーションを選択します。この手順で不明な点があれば、この記事の上に記載された要件セクションを確認してください。

    2. アプリケーションの設定ページから[Domain(ドメイン)][Client ID(クライアントID)]の値をコピーします。これらはSDKで必要です。

    3. Androidアプリケーションのstrings.xmlファイルで2つの新しいリソースを作成して保存します。キーの名前は以下で使用するキーと一致しなければなりません。

      <resources>
       
           <string name="com_auth0_domain">${account.namespace}</string>
       
      @@ -86,7 +86,7 @@ locale: ja-JP
       
       
      -

      ただし、Web認証をサポートする予定の場合は、ここでマニフェストのプレースホルダーを宣言する方法を確認してください。

      +

      ただし、Web認証をサポートする予定の場合は、ここでマニフェストのプレースホルダーを宣言する方法を確認してください。

      ## 受け取ったデータをAuth0トークンに交換する {{{ data-action="code" data-code="exchangeTokens" }}} diff --git a/ja-jp/articles/quickstart/native/android/interactive.md b/ja-jp/articles/quickstart/native/android/interactive.md index f956418517..fe357d30ae 100644 --- a/ja-jp/articles/quickstart/native/android/interactive.md +++ b/ja-jp/articles/quickstart/native/android/interactive.md @@ -7,7 +7,7 @@ files: - files/strings - files/MainActivity github: - path: https://github.com/auth0-samples/auth0-android-sample/tree/master/00-Login-Kt + path: 00-Login-Kt locale: ja-JP --- @@ -19,12 +19,12 @@ locale: ja-JP ## Auth0を構成する -

      Auth0のサービスを利用するには、Auth0 Dashboadに設定済みのアプリケーションがある必要があります。Auth0アプリケーションは、プロジェクトに認証を構成する場所です。

      アプリケーションを構成する

      対話型のセレクターを使ってAuth0アプリケーションを新規作成するか、統合したいプロジェクトを表す既存のアプリケーションを選択します。Auth0のすべてのアプリケーションには英数字からなる一意のクライアントIDが割り当てられており、アプリケーションのコードがSDKを通じてAuth0 APIを呼び出す際に使用されます。

      このクイックスタートを使って構成されたすべての設定は、Dashboardのアプリケーションを自動更新します。今後、アプリケーションの管理もDashboardで行えます。

      代わりに完了済みの構成を見てみたい場合は、サンプルアプリケーションをご覧ください。

      Callback URLを構成する

      Callback URLとは、Auth0によって認証後のユーザーをダイレクトするアプリケーションURLです。この値を設定していない場合、ユーザーはログイン後にアプリケーションに戻りません。

      サンプルプロジェクトに沿って進めている場合は、demo://{yourDomain}/android/YOUR_APP_PACKAGE_NAME/callbackに設定してください。

      ログアウトURLを構成する

      ログアウトURLとは、Auth0によってログアウト後のユーザーをリダイレクトするアプリケーションURLです。この値を設定していない場合、ユーザーはアプリケーションからログアウトできず、エラーを受け取ります。

      サンプルプロジェクトに沿って進めている場合は、demo://{yourDomain}/android/YOUR_APP_PACKAGE_NAME/callbackに設定してください。

      +

      Auth0のサービスを利用するには、Auth0 Dashboadに設定済みのアプリケーションがある必要があります。Auth0アプリケーションは、プロジェクトに認証を構成する場所です。

      アプリケーションを構成する

      対話型のセレクターを使ってAuth0アプリケーションを新規作成するか、統合したいプロジェクトを表す既存のアプリケーションを選択します。Auth0のすべてのアプリケーションには英数字からなる一意のクライアントIDが割り当てられており、アプリケーションのコードがSDKを通じてAuth0 APIを呼び出す際に使用されます。

      このクイックスタートを使って構成されたすべての設定は、Dashboardのアプリケーションを自動更新します。今後、アプリケーションの管理もDashboardで行えます。

      代わりに完了済みの構成を見てみたい場合は、サンプルアプリケーションをご覧ください。

      Callback URLを構成する

      Callback URLとは、Auth0によって認証後のユーザーをダイレクトするアプリケーションURLです。この値を設定していない場合、ユーザーはログイン後にアプリケーションに戻りません。

      サンプルプロジェクトに沿って進めている場合は、demo://{yourDomain}/android/YOUR_APP_PACKAGE_NAME/callbackに設定してください。

      ログアウトURLを構成する

      ログアウトURLとは、Auth0によってログアウト後のユーザーをリダイレクトするアプリケーションURLです。この値を設定していない場合、ユーザーはアプリケーションからログアウトできず、エラーを受け取ります。

      サンプルプロジェクトに沿って進めている場合は、demo://{yourDomain}/android/YOUR_APP_PACKAGE_NAME/callbackに設定してください。

      ## Auth0 Android SDKをインストールする {{{ data-action="code" data-code="build.gradle#18:18" }}} -

      Auth0 Android SDKをプロジェクトに追加します。ライブラリーはAuth0のAuthentication APIとManagement APIに要求を行います。

      アプリのbuild.gradle依存関係セクションで、以下を追加します。

      implementation 'com.auth0.android:auth0:2. '
      +

      Auth0 Android SDKをプロジェクトに追加します。ライブラリーはAuth0のAuthentication APIとManagement APIに要求を行います。

      アプリのbuild.gradle依存関係セクションで、以下を追加します。

      implementation 'com.auth0.android:auth0:2. '
       
       
      @@ -33,25 +33,25 @@ locale: ja-JP ## マニフェストのプレースホルダーを追加する {{{ data-action="code" data-code="build.gradle#10:12" }}} -

      SDKにはマニフェストのプレースホルダーが必要です。Auth0は内部でプレースホルダーを使用して、認証のCallback URLを捉えるintent-filterを定義します。Auth0テナントのドメインとCallback URLスキームを設定する必要があります。

      アクティビティーに特別なintent-filterを宣言する必要はありません。これは、マニフェストのプレースホルダーをAuth0ドメインスキームの値で定義したため、ライブラリーがリダイレクトを処理します。

      ここでは、auth0Schemedemoの値を使用したため、カスタムURLスキームをログイン後にAuth0がリダイレクトするURLに使用することができます。Androidアプリのリンクを使用したい場合は、httpsを使用する方法もあります。この値の設定に関する詳細情報は、Auth0.Android SDKのREADMEをお読みください。

      +

      SDKにはマニフェストのプレースホルダーが必要です。Auth0は内部でプレースホルダーを使用して、認証のCallback URLを捉えるintent-filterを定義します。Auth0テナントのドメインとCallback URLスキームを設定する必要があります。

      アクティビティーに特別なintent-filterを宣言する必要はありません。これは、マニフェストのプレースホルダーをAuth0ドメインスキームの値で定義したため、ライブラリーがリダイレクトを処理します。

      ここでは、auth0Schemedemoの値を使用したため、カスタムURLスキームをログイン後にAuth0がリダイレクトするURLに使用することができます。Androidアプリのリンクを使用したい場合は、httpsを使用する方法もあります。この値の設定に関する詳細情報は、Auth0.Android SDKのREADMEをお読みください。

      ## アプリケーションを構成する {{{ data-action="code" data-code="strings.xml#2:3" }}} -

      SDKが正しく機能するためには、次のプロパティをstrings.xmlで設定しなければなりません:

      • com_auth0_domain:Auth0テナントのドメインです。通常、Auth0 Dashboardにあるアプリケーションの[Settings(設定)]の[Domain(ドメイン)]フィールドで確認できます。カスタムドメインを使用している場合は、その値を代わりに設定してください。

      • com_auth0_client_id:このクイックスタートで前にセットアップしたAuth0アプリケーションのIDです。Auth0 Dashboardにあるアプリケーションの[Settings(設定)]の[Client ID(クライアントID)]フィールドで確認できます。

      AndroidManifest.xmlファイルがandroid.permissions.INTERNETのアクセス許可を指定していることを確認します。

      <uses-permission android:name="android.permission.INTERNET" />
      +

      SDKが正しく機能するためには、次のプロパティをstrings.xmlで設定しなければなりません:

      • com_auth0_domain:Auth0テナントのドメインです。通常、Auth0 Dashboardにあるアプリケーションの[Settings(設定)]の[Domain(ドメイン)]フィールドで確認できます。カスタムドメインを使用している場合は、その値を代わりに設定してください。

      • com_auth0_client_id:このクイックスタートで前にセットアップしたAuth0アプリケーションのIDです。Auth0 Dashboardにあるアプリケーションの[Settings(設定)]の[Client ID(クライアントID)]フィールドで確認できます。

      AndroidManifest.xmlファイルがandroid.permissions.INTERNETのアクセス許可を指定していることを確認します。

      <uses-permission android:name="android.permission.INTERNET" />
       
       
      -

      Android Studio内でSync Project with Gradle Filesを実行するか、コマンドラインから./gradlew clean assembleDebugを実行します。

      Gradleの使用に関する詳細は、Gradleの公式のドキュメンテーションを確認してください。

      +

      Android Studio内でSync Project with Gradle Filesを実行するか、コマンドラインから./gradlew clean assembleDebugを実行します。

      Gradleの使用に関する詳細は、Gradleの公式のドキュメンテーションを確認してください。

      ## アプリケーションにログインを追加する {{{ data-action="code" data-code="MainActivity.kt#6:38" }}} -

      アプリケーションに認証をセットアップするには、ユニバーサルログインが最も手軽な方法です。最良のエクスペリエンス、高い安全性、幅広い機能を活用するためにも、ユニバーサルログインの使用をお勧めします。

      onCreateメソッドで、Auth0クラスの新しいインスタンスを作成し、ユーザー資格情報を保持します。

      loginWithBrowserメソッドを作成し、WebAuthProviderクラスを使用して、Auth0 Dashboardのアプリケーションで有効にした接続で認証します。ここでは、初期設定の一部としてauth0Schemeマニフェストのプレースホルダーで使用されたスキーム値を渡すことができます。

      WebAuthProvider#start関数を呼び出した後、ブラウザーが起動し、ログインページが表示されます。ユーザーが認証を行うと、Callback URLが呼び出されます。Callback URLには、認証プロセスの最終結果が含まれています。

      Androidクイックスタート手順5「チェックポイント」

      loginWithBrowserを呼び出すアプリケーションにボタンを追加します。このボタンをクリックすると、AndroidアプリケーションによってAuth0ユニバーサルログインページにリダイレクトされ、ユーザー名とパスワードまたはソーシャルプロバイダーを使ってログインまたはサインアップできるようになったことを確認します。

      完了したら、Auth0がアプリにリダイレクトで戻されることを確認します。

      +

      アプリケーションに認証をセットアップするには、ユニバーサルログインが最も手軽な方法です。最良のエクスペリエンス、高い安全性、幅広い機能を活用するためにも、ユニバーサルログインの使用をお勧めします。

      onCreateメソッドで、Auth0クラスの新しいインスタンスを作成し、ユーザー資格情報を保持します。

      loginWithBrowserメソッドを作成し、WebAuthProviderクラスを使用して、Auth0 Dashboardのアプリケーションで有効にした接続で認証します。ここでは、初期設定の一部としてauth0Schemeマニフェストのプレースホルダーで使用されたスキーム値を渡すことができます。

      WebAuthProvider#start関数を呼び出した後、ブラウザーが起動し、ログインページが表示されます。ユーザーが認証を行うと、Callback URLが呼び出されます。Callback URLには、認証プロセスの最終結果が含まれています。

      Androidクイックスタート手順5「チェックポイント」

      loginWithBrowserを呼び出すアプリケーションにボタンを追加します。このボタンをクリックすると、AndroidアプリケーションによってAuth0ユニバーサルログインページにリダイレクトされ、ユーザー名とパスワードまたはソーシャルプロバイダーを使ってログインまたはサインアップできるようになったことを確認します。

      完了したら、Auth0がアプリにリダイレクトで戻すことを確認します。

      -

      If your application did not launch successfully:

      • Ensure you set the Allowed Callback URLs are correct

      • Verify you saved your changes after entering your URLs

      • Make sure the domain and cliend ID values imported correctly

      Still having issues? Check out our documentation or visit our community page to get more help.

      +

      アプリケーションが正常に起動しなかった場合は以下を行います。

      • 設定した[Allowed Callback URLs(許可されているCallback URL)]が正しいことを確認します

      • URLを入力した後で保存したことを確認します

      • ドメインとクライアントIDの値が正常にインポートされていることを確認します

      まだお困りですか?当社提供のドキュメントまたはコミュニティページで詳しい情報を確認してください。

      @@ -62,17 +62,17 @@ locale: ja-JP
      -

      If your application did not logout successfully:

      • Ensure the Allowed Logout URLs are set properly

      • Verify you saved your changes after entering your URLs

      Still having issues? Check out our documentation or visit our community page to get more help.

      +

      アプリケーションが正常にログアウトしなかった場合は以下を行います。

      • [Allowed Logout URLs(許可されているログアウトURL)]が正しく設定されていることを確認します

      • URLを入力した後で保存したことを確認します

      まだお困りですか?当社提供のドキュメントまたはコミュニティページで詳しい情報を確認してください。

      ## ユーザープロファイル情報を表示する {{{ data-action="code" data-code="MainActivity.kt#54:70" }}} -

      AuthenticationAPIClientクラスを使用して、Auth0からユーザーのプロファイルを取得します。これには以下のものが必要です。

      • ログインフェーズから返されるアクセストークン

      • WebAuthProvider.loginprofileスコープが含まれる必要がある

      ユーザーのメールアドレスを取得する必要がある場合は、emailスコープを指定する必要があります。

      このクイックスタートで、上のログイン手順中にデフォルトでopenid profile emailスコープが設定されます。

      以下に、ユーザーのプロファイルを取得して画面上に表示するために使用できる関数を示します。

      Androidクイックスタート手順7「チェックポイント」

      ログイン後にshowUserProfile関数を呼び出します。onSuccessコールバックがユーザーのプロファイル情報を返すことを確認します。

      +

      AuthenticationAPIClientクラスを使用して、Auth0からユーザーのプロファイルを取得します。これには以下のものが必要です。

      • ログインフェーズから返されるアクセストークン

      • WebAuthProvider.loginprofileスコープが含まれる必要がある

      ユーザーのメールアドレスを取得する必要がある場合は、emailスコープを指定する必要があります。

      このクイックスタートで、上のログイン手順中にデフォルトでopenid profile emailスコープが設定されます。

      以下に、ユーザーのプロファイルを取得して画面上に表示するために使用できる関数を示します。

      Androidクイックスタート手順7「チェックポイント」

      ログイン後にshowUserProfile関数を呼び出します。onSuccessコールバックがユーザーのプロファイル情報を返すことを確認します。

      -

      If your application did not return user profile information:

      • Verify the accessToken is valid

      Still having issues? Check out our documentation or visit our community page to get more help.

      +

      アプリケーションがユーザープロファイル情報を返さなかった場合には以下を行います。

      • accessToken が有効であることを確認します

      まだお困りですか?当社提供のドキュメントまたはコミュニティページで詳しい情報を確認してください。

      diff --git a/ja-jp/articles/quickstart/native/device/interactive.md b/ja-jp/articles/quickstart/native/device/interactive.md index 043f0c4803..c3b4dfadf4 100644 --- a/ja-jp/articles/quickstart/native/device/interactive.md +++ b/ja-jp/articles/quickstart/native/device/interactive.md @@ -3,40 +3,38 @@ title: デバイス認可フロー description: このチュートリアルでは、デバイス認可フローを使用して、入力に制約のあるデバイスからAPIを呼び出す方法について説明します。 interactive: true -github: - path: https://auth0.github.io/device-flow-playground/ locale: ja-JP --- # デバイス認可フロー -

      このチュートリアルでは、デバイス認可フローを使用して、入力に制約のあるデバイスからAPIを呼び出す方法について説明します。 ログインして、アカウント用に構成された例を参考にこのクイックタートに従うことをお勧めします。

      対話型のエクスペリエンスには、Device Flow Playgroundを使用することができます。

      前提条件

      +

      このチュートリアルでは、デバイス認可フローを使用して、入力に制約のあるデバイスからAPIを呼び出す方法について説明します。 ログインして、アカウント用に構成された例を参考にこのクイックタートに従うことをお勧めします。

      対話型のエクスペリエンスには、Device Flow Playgroundを使用することができます。

      前提条件

      ## デバイスコードを要求する -

      ユーザーがデバイスアプリケーションを起動して、それを認可したい場合には、アプリケーションがAuth0 Authentication APIからのデバイスコードを要求して、ユーザーのセッションに関連付けなければなりません。

      デバイスコードを取得するには、アプリケーションがAuthentication APIのデバイス認可フローで認証エンドポイントを呼び出す必要があります:

      
      +

      ユーザーがデバイスアプリケーションを起動して、それを認可したい場合には、アプリケーションがAuth0 Authentication APIからのデバイスコードを要求して、ユーザーのセッションに関連付けなければなりません。

      デバイスコードを取得するには、アプリケーションがAuthentication APIのデバイス認可フローで認証エンドポイントを呼び出す必要があります:

      
       
       
      - + -
      curl --request post \
      +  
      curl --request post \
       
         --url 'https://${account.namespace}/oauth/device/code' \
       
      -  --header 'content-type: application/x-www-form-urlencoded'
      var client = new RestClient("https://${account.namespace}/oauth/device/code");
      +  --header 'content-type: application/x-www-form-urlencoded'
      var client = new RestClient("https://${account.namespace}/oauth/device/code");
       
       var request = new RestRequest(Method.POST);
       
       request.AddHeader("content-type", "application/x-www-form-urlencoded");
       
      -IRestResponse response = client.Execute(request);
      package main
      +IRestResponse response = client.Execute(request);
      package main
       
       
       
      @@ -84,11 +82,11 @@ func main() {
       
       
       
      -}
      HttpResponse<String> response = Unirest.post("https://${account.namespace}/oauth/device/code")
      +}
      HttpResponse<String> response = Unirest.post("https://${account.namespace}/oauth/device/code")
       
         .header("content-type", "application/x-www-form-urlencoded")
       
      -  .asString();
      var axios = require("axios").default;
      +  .asString();
      var axios = require("axios").default;
       
       
       
      @@ -112,7 +110,7 @@ axios.request(options).then(function (response) {
       
         console.error(error);
       
      -});
      #import <Foundation/Foundation.h>
      +});
      #import <Foundation/Foundation.h>
       
       
       
      @@ -152,7 +150,7 @@ NSURLSessionDataTask *dataTask = [session dataTaskWithRequest:request
       
                                                   }];
       
      -[dataTask resume];
      $curl = curl_init();
      +[dataTask resume];
      $curl = curl_init();
       
       
       
      @@ -200,7 +198,7 @@ if ($err) {
       
         echo $response;
       
      -}
      import http.client
      +}
      import http.client
       
       
       
      @@ -222,7 +220,7 @@ data = res.read()
       
       
       
      -print(data.decode("utf-8"))
      require 'uri'
      +print(data.decode("utf-8"))
      require 'uri'
       
       require 'net/http'
       
      @@ -250,7 +248,7 @@ request["content-type"] = 'application/x-www-form-urlencoded'
       
       response = http.request(request)
       
      -puts response.read_body
      import Foundation
      +puts response.read_body
      import Foundation
       
       
       
      @@ -327,7 +325,7 @@ dataTask.resume()
      ## トークンエンドポイントをポーリングする -

      ユーザーによるアクティベーションを待っている間、デバイスアプリケーションはAuthentication API POST /oauth/tokenエンドポイントを断続的に呼び出して、応答を適切に処理する必要があります。

      デバイスアプリケーションが確実にそのinterval(秒単位)または成功応答の受信で長い方の時間を待機して、ネットワーク遅延の問題を回避するようにします。

      curl --request POST \ 
      +

      ユーザーによるアクティベーションを待っている間、デバイスアプリケーションはAuthentication API POST /oauth/tokenエンドポイントを断続的に呼び出して、応答を適切に処理する必要があります。

      デバイスアプリケーションが確実にそのinterval(秒単位)または成功応答の受信で長い方の時間を待機して、ネットワーク遅延の問題を回避するようにします。

      curl --request POST \ 
       
       --url 'https://${account.namespace}/oauth/token' \ 
       
      @@ -367,7 +365,7 @@ dataTask.resume()
      -

      トークンは検証してから保存します。方法については、「アクセストークンを検証する」と「IDトークンを検証する」をお読みください。

      アクセストークンは、Authentication APIのユーザー情報取得エンドポイント(デバイスアプリケーションがopenidスコープを要求した場合)、またはaudienceパラメーターが指定したAPIを呼び出すために使用されます。独自のAPIを呼び出す場合には、デバイスアプリケーションは使用する前にアクセストークンを検証しなければなりません。

      IDトークンには、デコードと抽出が必要なユーザー情報が含まれています。デバイスアプリケーションがopenidスコープを要求した場合には、Authentication APIはid_tokenのみを返します。

      リフレッシュトークンは、アクセストークンまたはIDトークンの期限が切れたときに、新しいトークンの取得に使用されます。audienceパラメーターが指定するAPIに[Allow Offline Access(オフラインアクセスの許可)]設定が有効化されていて、デバイスアプリケーションがoffline_accessスコープを要求した場合には、Authentication APIはrefresh_tokenのみを返します。

      +

      トークンは検証してから保存します。方法については、「アクセストークンを検証する」と「IDトークンを検証する」をお読みください。

      アクセストークンは、Authentication APIのユーザー情報取得エンドポイント(デバイスアプリケーションがopenidスコープを要求した場合)、またはaudienceパラメーターが指定したAPIを呼び出すために使用されます。独自のAPIを呼び出す場合には、デバイスアプリケーションは使用する前にアクセストークンを検証しなければなりません。

      IDトークンには、デコードと抽出が必要なユーザー情報が含まれています。デバイスアプリケーションがopenidスコープを要求した場合には、Authentication APIはid_tokenのみを返します。

      リフレッシュトークンは、アクセストークンまたはIDトークンの期限が切れたときに、新しいトークンの取得に使用されます。audienceパラメーターが指定するAPIに[Allow Offline Access(オフラインアクセスの許可)]設定が有効化されていて、デバイスアプリケーションがoffline_accessスコープを要求した場合には、Authentication APIはrefresh_tokenのみを返します。

      ## APIを呼び出す @@ -387,7 +385,7 @@ dataTask.resume()
## リフレッシュトークン -

ユーザーに新しいアクセストークンを取得するために、デバイスアプリケーションは、refresh_tokenパラメーターを指定してAuthentication API POST /oauth/tokenエンドポイントを呼び出すことができます。

curl --request POST \
+

ユーザーに新しいアクセストークンを取得するために、デバイスアプリケーションは、refresh_tokenパラメーターを指定してAuthentication API POST /oauth/tokenエンドポイントを呼び出すことができます。

curl --request POST \
 
   --url 'https://${account.namespace}/oauth/token' \
 
@@ -419,7 +417,7 @@ dataTask.resume()
-

リフレッシュトークンの詳細については、「リフレッシュトークン」をお読みください。

+

リフレッシュトークンの詳細については、「リフレッシュトークン」をお読みください。

## トラブルシューティング @@ -553,9 +551,9 @@ dataTask.resume()
## 実装例 -

以下の例を参考に、このフローを実際のアプリケーションに実装する方法を確認してください。

  • Device Authorization Playground

  • AppleTV(Swift):AppleTVからのデバイス認可フローにAuth0を使用する方法を示す簡素なアプリケーションです。

  • CLI(Node.js):認可コードフローではなく、デバイス認可フローを使用するCLIの実装例です。大きな違いは、CLIがWebサーバーのホスティングやポートの待ち受けを必要としないことです。

+

以下の例を参考に、このフローを実際のアプリケーションに実装する方法を確認してください。

  • Device Authorization Playground

  • AppleTV(Swift):AppleTVからのデバイス認可フローにAuth0を使用する方法を示す簡素なアプリケーションです。

  • CLI(Node.js):認可コードフローではなく、デバイス認可フローを使用するCLIの実装例です。大きな違いは、CLIがWebサーバーのホスティングやポートの待ち受けを必要としないことです。

## 制限事項 -

デバイス認可フローを使用するには、デバイスアプリケーションに以下が必要です。

また、デバイス認可フローには以下を使用できません:

+

デバイス認可フローを使用するには、デバイスアプリケーションに以下が必要です。

また、デバイス認可フローには以下を使用できません:

diff --git a/ja-jp/articles/quickstart/native/flutter/interactive.md b/ja-jp/articles/quickstart/native/flutter/interactive.md index ac29e2d337..94e8548e5f 100644 --- a/ja-jp/articles/quickstart/native/flutter/interactive.md +++ b/ja-jp/articles/quickstart/native/flutter/interactive.md @@ -7,19 +7,19 @@ files: - files/main_view - files/profile_view github: - path: https://github.com/auth0-samples/auth0-flutter-samples/tree/main/sample + path: sample locale: ja-JP --- # Flutterアプリケーションにログインを追加する -

Auth0を使用すると、アプリケーションに手軽に認証を追加して、ユーザープロファイル情報にアクセスできます。このガイドでは、FlutterアプリにAuth0 Flutter SDKを使ってAuth0を統合する方法を説明します。

Flutter SDKは現在、Android、iOS、macOS版のFlutterアプリのみに対応しています。

このクイックスタートでは、すでにFlutterアプリが問題なく作動しているものとします。そうでない場合は、Flutter「入門」ガイドをチェックして、シンプルなアプリの始め方をご確認ください。

Flutterコマンドラインツールの知識も必要になります。

+

Auth0を使用すると、アプリケーションに手軽に認証を追加して、ユーザープロファイル情報にアクセスできます。このガイドでは、FlutterアプリにAuth0 Flutter SDKを使ってAuth0を統合する方法を説明します。

Flutter SDKは現在、Android、iOS、macOS版のFlutterアプリのみに対応しています。

このクイックスタートでは、すでにFlutterアプリが問題なく作動しているものとします。そうでない場合は、Flutter「入門」ガイドをチェックして、シンプルなアプリの始め方をご確認ください。

Flutterコマンドラインツールの知識も必要になります。

## Auth0を構成する -

Auth0のサービスを利用するには、Auth0 Dashboadに設定済みのアプリケーションがある必要があります。Auth0アプリケーションは、プロジェクトに対してどのように認証が動作して欲しいかを構成する場所です。

Auth0アプリケーションを構成する

対話型のセレクターを使ってAuth0アプリケーションを新規作成するか、既存のネイティブのAuth0アプリケーションを選択します。Auth0のすべてのアプリケーションには英数字からなる一意のクライアントIDが割り当てられており、アプリケーションのコードがSDKを通じてAuth0 APIを呼び出す際に使用されます。

このクイックスタートを使って構成されたすべての設定は、Dashboardのアプリケーションを自動更新します。今後、アプリケーションの管理もDashboardで行えます。

完了済みの構成を見てみたい場合は、サンプルアプリをご覧ください。

Callback URLとログアウトURLを構成する

Callback URLとログアウトURLは、ユーザーをアプリにリダイレクトで戻すために、Auth0が呼び出すURLです。 Auth0は、ユーザーを認証した後にCallback URLを呼び出し、セッションのクッキーを削除した後にログアウトURLを呼び出します。Callback URLとログアウトURLを設定しないと、ユーザーはアプリにログインやログアウトが行えなくなり、エラーが発生します。

プラットフォームに合わせて、Callback URLとログアウトURLに以下の値を設定します。

Androidでは、SCHEMEプレースホルダーの値はhttpsや他のカスタムスキームでも構いません。httpsスキームでは、Androidアプリリンクを有効にする必要があります。

iOS 17.4以降とmacOS 14.4以降では、ユニバーサルリンク(httpsスキーム)をCallback URLとログアウトURLに使うことができます。有効にすると、SDKは、iOS/macOSの古いバージョンではカスタムURLスキームにフォールバックして、アプリのバンドル識別子を使用します。この機能にはXcode 15.3以降と有料のApple Developerアカウントが必要です

Android

SCHEME://{yourDomain}/android/YOUR_PACKAGE_NAME/callback

iOS

https://{yourDomain}/ios/YOUR_BUNDLE_IDENTIFIER/callback, +

Auth0のサービスを利用するには、Auth0 Dashboadに設定済みのアプリケーションがある必要があります。Auth0アプリケーションは、プロジェクトに対してどのように認証が動作して欲しいかを構成する場所です。

Auth0アプリケーションを構成する

対話型のセレクターを使ってAuth0アプリケーションを新規作成するか、既存のネイティブのAuth0アプリケーションを選択します。Auth0のすべてのアプリケーションには英数字からなる一意のクライアントIDが割り当てられており、アプリケーションのコードがSDKを通じてAuth0 APIを呼び出す際に使用されます。

このクイックスタートを使って構成されたすべての設定は、Dashboardのアプリケーションを自動更新します。今後、アプリケーションの管理もDashboardで行えます。

完了済みの構成を見てみたい場合は、サンプルアプリをご覧ください。

Callback URLとログアウトURLを構成する

Callback URLとログアウトURLは、ユーザーをアプリにリダイレクトで戻すために、Auth0が呼び出すURLです。 Auth0は、ユーザーを認証した後にCallback URLを呼び出し、セッションのクッキーを削除した後にログアウトURLを呼び出します。Callback URLとログアウトURLを設定しないと、ユーザーはアプリにログインやログアウトが行えなくなり、エラーが発生します。

プラットフォームに合わせて、Callback URLとログアウトURLに以下の値を設定します。

Androidでは、SCHEMEプレースホルダーの値はhttpsや他のカスタムスキームでも構いません。httpsスキームでは、Androidアプリリンクを有効にする必要があります。

iOS 17.4以降とmacOS 14.4以降では、ユニバーサルリンク(httpsスキーム)をCallback URLとログアウトURLに使うことができます。有効にすると、SDKは、iOS/macOSの古いバージョンではカスタムURLスキームにフォールバックして、アプリのバンドル識別子を使用します。この機能にはXcode 15.3以降と有料のApple Developerアカウントが必要です

Android

SCHEME://{yourDomain}/android/YOUR_PACKAGE_NAME/callback

iOS

https://{yourDomain}/ios/YOUR_BUNDLE_IDENTIFIER/callback, YOUR_BUNDLE_IDENTIFIER://{yourDomain}/ios/YOUR_BUNDLE_IDENTIFIER/callback

macOS

https://{yourDomain}/macos/YOUR_BUNDLE_IDENTIFIER/callback, @@ -35,12 +35,12 @@ com.example.MyApp://example.us.auth0.com/ios/com.example.MyApp/callbackAndroidプラットフォームが開発対象でない場合には、この手順をスキップしてください。

SDKにはマニフェストのプレースホルダーが必要です。Auth0は内部でプレースホルダーを使用して、認証のCallback URLを捉えるintent-filterを定義します。Auth0テナントのドメインとCallback URLスキームを設定する必要があります。

サンプルでは、次のプレースホルダーを使用します:

  • auth0Domain:Auth0テナントのドメインです。通常、Auth0 Dashboardにあるアプリケーションの設定[Domain(ドメイン)]フィールドで確認できます。カスタムドメインを使用している場合には、この値をカスタムドメインの値に設定してください。

  • auth0Scheme:使用するスキームです。カスタムスキーム、または、Androidアプリリンクを利用したい場合はhttpsになります。この値の設定に関する詳細情報は、Auth0.Android SDK READMEをお読みください。

アクティビティーに特別なintent-filterを宣言する必要はありません。これは、マニフェストのプレースホルダーをAuth0ドメインスキームの値で定義したからです。リダイレクトはライブラリーによって処理されます。

Android Studio内でSync Project with Gradle Filesを実行し、変更内容を適用します。

+

Androidプラットフォームが開発対象でない場合には、この手順をスキップしてください。

SDKにはマニフェストのプレースホルダーが必要です。Auth0は内部でプレースホルダーを使用して、認証のCallback URLを捉えるintent-filterを定義します。Auth0テナントのドメインとCallback URLスキームを設定する必要があります。

サンプルでは、次のプレースホルダーを使用します:

  • auth0Domain:Auth0テナントのドメインです。通常、Auth0 Dashboardにあるアプリケーションの設定[Domain(ドメイン)]フィールドで確認できます。カスタムドメインを使用している場合には、この値をカスタムドメインの値に設定してください。

  • auth0Scheme:使用するスキームです。カスタムスキーム、または、Androidアプリリンクを利用したい場合はhttpsになります。この値の設定に関する詳細情報は、Auth0.Android SDK READMEをお読みください。

アクティビティーに特別なintent-filterを宣言する必要はありません。これは、マニフェストのプレースホルダーをAuth0ドメインスキームの値で定義したからです。リダイレクトはライブラリーによって処理されます。

Android Studio内でSync Project with Gradle Filesを実行し、変更内容を適用します。

## iOS/macOSを構成する -

iOSまたはmacOSプラットフォームが開発対象でない場合には、この手順をスキップしてください。

この手順では、有料のApple Developerアカウントが必要です。Callback URLおよびログアウトURLとしてユニバーサルリンクを使用する必要があります。代わりにカスタムのURLスキームを使用する場合はこの手順をスキップしてください。

チームIDとバンドル識別子を構成する

Auth0アプリケーションの設定ページに移動して最後までスクロールし、 [Advanced Settings(詳細設定)]>[Device Settings(デバイス設定)]を開きます。[iOS]セクションで[Team ID(チームID)]Apple Team IDを、[App ID(アプリID)]にアプリのバンドル識別子を設定します。

null

これで、アプリがAuth0テナントのapple-app-site-associationファイルに追加されます。

関連ドメインの機能を追加する

open ios/Runner.xcworkspace(macOSの場合にはopen macos/Runner.xcworkspace)を実行し、Xcodeでアプリを開きます。Runnerターゲット設定の[Signing & Capabilities(署名と機能)]タブに移動し、[+ Capability(+機能)]ボタンを押します。それから[Associated Domains(関連ドメイン)]を選択します。

null

次に、以下のエントリー[Associated Domains(関連ドメイン)]の下に追加します。

webcredentials:{yourDomain}

カスタムドメインがある場合は、Auth0ドメインの代わりに、設定ページにあるカスタムドメインを使用してください。

関連ドメインが動作するためには、iOSシミュレーター用に構築されている場合でも、アプリが自分のチーム証明書で署名されている必要があります。Apple Teamには必ず、Auth0アプリケーションの設定ページで構成されたチームIDのものを使用してください。

+

iOSまたはmacOSプラットフォームが開発対象でない場合には、この手順をスキップしてください。

この手順では、有料のApple Developerアカウントが必要です。Callback URLおよびログアウトURLとしてユニバーサルリンクを使用する必要があります。代わりにカスタムのURLスキームを使用する場合はこの手順をスキップしてください。

チームIDとバンドル識別子を構成する

Auth0アプリケーションの設定ページに移動して最後までスクロールし、 [Advanced Settings(詳細設定)]>[Device Settings(デバイス設定)]を開きます。[iOS]セクションで[Team ID(チームID)]Apple Team IDを、[App ID(アプリID)]にアプリのバンドル識別子を設定します。

null

これで、アプリがAuth0テナントのapple-app-site-associationファイルに追加されます。

関連ドメインの機能を追加する

open ios/Runner.xcworkspace(macOSの場合にはopen macos/Runner.xcworkspace)を実行し、Xcodeでアプリを開きます。Runnerターゲット設定の[Signing & Capabilities(署名と機能)]タブに移動し、[+ Capability(+機能)]ボタンを押します。それから[Associated Domains(関連ドメイン)]を選択します。

null

次に、以下のエントリー[Associated Domains(関連ドメイン)]の下に追加します。

webcredentials:{yourDomain}

カスタムドメインがある場合は、Auth0ドメインの代わりに、設定ページにあるカスタムドメインを使用してください。

関連ドメインが動作するためには、iOSシミュレーター用に構築されている場合でも、アプリが自分のチーム証明書で署名されている必要があります。Apple Teamには必ず、Auth0アプリケーションの設定ページで構成されたチームIDのものを使用してください。

## アプリケーションにログインを追加する {{{ data-action="code" data-code="main_view.dart#29:40" }}} @@ -49,7 +49,7 @@ com.example.MyApp://example.us.auth0.com/ios/com.example.MyApp/callback
-

If your app did not launch successfully:

  • Ensure you set the Allowed Callback URLs are correct

  • Verify you saved your changes after entering your URLs

  • Make sure the domain and client ID values are imported correctly

  • If using Android, ensure that the manifest placeholders have been set up correctly, otherwise the redirect back to your app may not work

Still having issues? Check out our documentation or visit our community page to get more help.

+

アプリが正常に起動しなかった場合は以下を行います。

  • 設定した[Allowed Callback URLs(許可されているCallback URL)]が正しいことを確認します

  • URLを入力した後で保存したことを確認します

  • ドメインとクライアントIDの値が正常にインポートされていることを確認します

  • Androidを使用している場合は、アプリに正しくリダイレクトで戻されるように、マニフェストのプレースホルダーが正しくセットアップされていることを確認します

まだお困りですか?当社提供のドキュメントまたはコミュニティページで詳しい情報を確認してください。

@@ -60,7 +60,7 @@ com.example.MyApp://example.us.auth0.com/ios/com.example.MyApp/callback
-

If your app did not log out successfully:

  • Ensure the Allowed Logout URLs are set properly

  • Verify you saved your changes after entering your URLs

Still having issues? Check out our documentation or visit our community page to get more help.

+

アプリが正常にログアウトしなかった場合は以下を行います。

  • [Allowed Logout URLs(許可されているログアウトURL)]が正しく設定されていることを確認します

  • URLを入力した後で保存したことを確認します

まだお困りですか?当社提供のドキュメントまたはコミュニティページで詳しい情報を確認してください。

@@ -71,6 +71,6 @@ com.example.MyApp://example.us.auth0.com/ios/com.example.MyApp/callback
-

If your app did not return user profile information:

  • Verify the access token is valid

Still having issues? Check out our documentation or visit our community page to get more help.

+

アプリがユーザープロファイル情報を返さなかった場合には以下を行います。

  • アクセストークンが有効であることを確認します

まだお困りですか?当社提供のドキュメントまたはコミュニティページで詳しい情報を確認してください。

diff --git a/ja-jp/articles/quickstart/native/ionic-angular/interactive.md b/ja-jp/articles/quickstart/native/ionic-angular/interactive.md index 39945322ac..a2d4c3311c 100644 --- a/ja-jp/articles/quickstart/native/ionic-angular/interactive.md +++ b/ja-jp/articles/quickstart/native/ionic-angular/interactive.md @@ -9,60 +9,60 @@ files: - files/logout-button - files/user-profile github: - path: https://github.com/auth0-samples/auth0-ionic-samples/tree/main/angular + path: angular locale: ja-JP --- # Capacitorを用いたIonic Angularアプリケーションにログインを追加する -

Auth0を使用すると、アプリケーションに手軽に認証を追加して、ユーザープロファイル情報にアクセスすることができます。このガイドは、Ionic(Angular)とCapacitorのアプリケーションにAuth0 Angular SDKを使ってAuth0を統合する方法を説明します。

+

Auth0を使用すると、アプリケーションに手軽に認証を追加して、ユーザープロファイル情報にアクセスすることができます。このガイドは、Ionic(Angular)とCapacitorのアプリケーションにAuth0 Angular SDKを使ってAuth0を統合する方法を説明します。

## 使用を開始する -

このクイックスタートは、IonicアプリケーションがCapacitorを使ってすでに実行されていることを前提としています。そうでない場合には、IonicフレームワークでCapacitorを使用するガイドを参照しながら簡単なアプリから始めるか、サンプリアプリを複製してください。

また、Capacitorの開発ワークフローを理解しておく必要もあります。

+

このクイックスタートは、IonicアプリケーションがCapacitorを使ってすでに実行されていることを前提としています。そうでない場合には、IonicフレームワークでCapacitorを使用するガイドを参照しながら簡単なアプリから始めるか、サンプリアプリを複製してください。

また、Capacitorの開発ワークフローを理解しておく必要もあります。

## Auth0を構成する -

Auth0のサービスを利用するには、Auth0 Dashboadに設定済みのアプリケーションがある必要があります。Auth0アプリケーションは、プロジェクトに対してどのように認証が動作して欲しいかを構成する場所です。

以下の説明では、「YOUR_PACKAGE_ID」を実際のアプリケーションのパッケージIDに置き換えてください。これは、capacitor.config.tsファイルのappIdフィールドで見つけて構成することができます。詳細については、Capacitorの構成スキーマを参照してください。

アプリケーションを構成する

対話型のセレクターを使ってAuth0アプリケーションを新規作成するか、統合したいプロジェクトを表す既存のアプリケーションを選択します。Auth0のすべてのアプリケーションには英数字からなる一意のクライアントIDが割り当てられており、アプリケーションのコードがSDKを通じてAuth0 APIを呼び出す際に使用されます。

このクイックスタートを使って構成されたすべての設定は、Dashboardのアプリケーションを自動更新します。今後、アプリケーションの管理もDashboardで行えます。

完了済みの構成を見てみたい場合は、サンプルアプリケーションをご覧ください。

Callback URLを構成する

Callback URLとは、Auth0がユーザーを認証後にリダイレクトするアプリケーション内URLです。設定されていない場合、ユーザーはログイン後にアプリケーションに戻りません。

サンプルプロジェクトに沿って進めている場合には、次の値に設定します:

YOUR_PACKAGE_ID://{yourDomain}/capacitor/YOUR_PACKAGE_ID/callback

ログアウトURLを構成する

ログアウトURLとは、Auth0がユーザーをログアウト後にリダイレクトするアプリケーション内URLです。設定されていない場合、ユーザーはアプリケーションからログアウトできず、エラーを受け取ります。

サンプルプロジェクトに沿って進めている場合には、次の値に設定します:

YOUR_PACKAGE_ID://{yourDomain}/capacitor/YOUR_PACKAGE_ID/callback

許可されているオリジンを構成する

ネイティブアプリケーションからAuth0へ要求を送信できるようにするには、アプリケーションの設定で次の許可されているオリジンを設定します。

サンプルプロジェクトに沿って進めている場合、capacitorにiOSとAndroidでそれぞれcapacitor://localhost, http://localhostを設定します。

最後に、アプリケーションの[Application Type(アプリケーションタイプ)][Native(ネイティブ)]になっていることをアプリケーションの設定で必ず確認してください。

+

Auth0のサービスを利用するには、Auth0 Dashboadに設定済みのアプリケーションがある必要があります。Auth0アプリケーションは、プロジェクトに対してどのように認証が動作して欲しいかを構成する場所です。

以下の説明では、「YOUR_PACKAGE_ID」を実際のアプリケーションのパッケージIDに置き換えてください。これは、capacitor.config.tsファイルのappIdフィールドで見つけて構成することができます。詳細については、Capacitorの構成スキーマを参照してください。

アプリケーションを構成する

対話型のセレクターを使ってAuth0アプリケーションを新規作成するか、統合したいプロジェクトを表す既存のアプリケーションを選択します。Auth0のすべてのアプリケーションには英数字からなる一意のクライアントIDが割り当てられており、アプリケーションのコードがSDKを通じてAuth0 APIを呼び出す際に使用されます。

このクイックスタートを使って構成されたすべての設定は、Dashboardのアプリケーションを自動更新します。今後、アプリケーションの管理もDashboardで行えます。

完了済みの構成を見てみたい場合は、サンプルアプリケーションをご覧ください。

Callback URLを構成する

Callback URLとは、Auth0がユーザーを認証後にリダイレクトするアプリケーション内URLです。設定されていない場合、ユーザーはログイン後にアプリケーションに戻りません。

サンプルプロジェクトに沿って進めている場合には、次の値に設定します:

YOUR_PACKAGE_ID://{yourDomain}/capacitor/YOUR_PACKAGE_ID/callback

ログアウトURLを構成する

ログアウトURLとは、Auth0がユーザーをログアウト後にリダイレクトするアプリケーション内URLです。設定されていない場合、ユーザーはアプリケーションからログアウトできず、エラーを受け取ります。

サンプルプロジェクトに沿って進めている場合には、次の値に設定します:

YOUR_PACKAGE_ID://{yourDomain}/capacitor/YOUR_PACKAGE_ID/callback

許可されているオリジンを構成する

ネイティブアプリケーションからAuth0へ要求を送信できるようにするには、アプリケーションの設定で次の許可されているオリジンを設定します。

サンプルプロジェクトに沿って進めている場合、capacitorにiOSとAndroidでそれぞれcapacitor://localhost, http://localhostを設定します。

最後に、アプリケーションの[Application Type(アプリケーションタイプ)][Native(ネイティブ)]になっていることをアプリケーションの設定で必ず確認してください。

## Auth0 Angular SDKをインストールする -

プロジェクトディレクトリで次のコマンドを実行して、Auth0 Angular SDKをインストールします:

npm install @auth0/auth0-angular

SDKはモジュールや認証サービスなど、Auth0をAngularアプリケーションに慣用的に統合しやすくする種類をいくつか公開しています。

Capacitorプラグインをインストールする

このクイックスタートとサンプルでは、Capacitorの公式プラグインをいくつか使用しています。次のコマンドを使用して、これらをアプリにインストールします:

npm install @capacitor/browser @capacitor/app

  • @capacitor/browser:デバイスのシステムブラウザーと対話できるようになり、Auth0の認可エンドポイントへのURLを開くために使用されます。

  • @capacitor/app:高レベルのアプリイベントを受け取れるようになるため、Auth0からのコールバックを扱うのに便利です。

iOSのCapacitorのBrowserプラグインはSFSafariViewControllerを使用し、iOS 11以降ではデバイス上のSafariとクッキーを共有しません。つまり、これらのデバイスではSSOが機能しません。SSOが必要な場合には、ASWebAuthenticationSessionを使用する互換のプラグインを使用してください。

+

プロジェクトディレクトリで次のコマンドを実行して、Auth0 Angular SDKをインストールします:

npm install @auth0/auth0-angular

SDKはモジュールや認証サービスなど、Auth0をAngularアプリケーションに慣用的に統合しやすくする種類をいくつか公開しています。

Capacitorプラグインをインストールする

このクイックスタートとサンプルでは、Capacitorの公式プラグインをいくつか使用しています。次のコマンドを使用して、これらをアプリにインストールします:

npm install @capacitor/browser @capacitor/app

  • @capacitor/browser:デバイスのシステムブラウザーと対話できるようになり、Auth0の認可エンドポイントへのURLを開くために使用されます。

  • @capacitor/app:高レベルのアプリイベントを受け取れるようになるため、Auth0からのコールバックを扱うのに便利です。

iOSのCapacitorのBrowserプラグインはSFSafariViewControllerを使用し、iOS 11以降ではデバイス上のSafariとクッキーを共有しません。つまり、これらのデバイスではSSOが機能しません。SSOが必要な場合には、ASWebAuthenticationSessionを使用する互換のプラグインを使用してください。

## 認証モジュールを登録して構成する {{{ data-action="code" data-code="app.module.ts" }}} -

SDKは、SDKが機能するために必要なすべてのサービスを含んだAuthModuleをエクスポートします。このモジュールをアプリケーションに登録し、Auth0のドメインとクライアントIDで構成する必要があります。

AuthModule.forRoot関数は以下の構成を使用します。

  • domain:Auth0 Dashboardで作成したアプリケーションの設定にあるdomain値、またはAuth0のカスタムドメイン機能を使用する場合のカスタムドメインです。

  • clientId:Auth0 Dashboardで作成したアプリケーションの設定にあるクライアントID値です。

  • useRefreshTokens:AndroidまたはiOSでauth0-angularをIonicと使用するには、リフレッシュトークンを有効にする必要があります。

  • useRefreshTokensFallback:AndroidまたはiOSでauth0-angularをIonicと使用するには、iframeのフォールバックを無効にする必要があります。

  • authorizationParams.redirect_uri:Auth0で認証した後に、ユーザーをリダイレクトするURLです。

アプリケーションの閉開後に認証を継続するには、SDKを構成する際にcacheLocationlocalstorageに設定することをお勧めします。ただし、localstorageにトークンを保管するリスクを理解してください。また、状況によってはlocalstorageのデータが思いがけず復元される可能性もあるため、Capacitorアプリ内では一次的なものとして扱ってください。Capacitorドキュメントに記載のストレージに関するガイドをお読みください。

さらに、より安全で永続的なストレージの仕組みが要件である場合、SDKを使用すると、カスタムのキャッシュを実装してトークンを保管することができます。

注意CapacitorのStorageプラグインは、iOSではUserDefaults、AndroidではSharedPreferencesによってバックアップされるため、トークンの保管に使用しないことをお勧めします。これらのAPIを使って保管されたデータは暗号化されません。セキュリティで保護されることもなく、クラウドと同期される可能性があります。

IonicとCapacitor(Angular)- 手順4 - 認証モジュールを登録して構成する

アプリがAuth0 Angular SDKで構成されました。今度は、アプリケーションを実行して、SDKがエラーなく初期化されること、そして、以前と同じように動作することを確認します。

+

SDKは、SDKが機能するために必要なすべてのサービスを含んだAuthModuleをエクスポートします。このモジュールをアプリケーションに登録し、Auth0のドメインとクライアントIDで構成する必要があります。

AuthModule.forRoot関数は以下の構成を使用します。

  • domain:Auth0 Dashboardで作成したアプリケーションの設定にあるdomain値、またはAuth0のカスタムドメイン機能を使用する場合のカスタムドメインです。

  • clientId:Auth0 Dashboardで作成したアプリケーションの設定にあるクライアントID値です。

  • useRefreshTokens:AndroidまたはiOSでauth0-angularをIonicと使用するには、リフレッシュトークンを有効にする必要があります。

  • useRefreshTokensFallback:AndroidまたはiOSでauth0-angularをIonicと使用するには、iframeのフォールバックを無効にする必要があります。

  • authorizationParams.redirect_uri:Auth0で認証した後に、ユーザーをリダイレクトするURLです。

アプリケーションの閉開後に認証を継続するには、SDKを構成する際にcacheLocationlocalstorageに設定することをお勧めします。ただし、localstorageにトークンを保管するリスクを理解してください。また、状況によってはlocalstorageのデータが思いがけず復元される可能性もあるため、Capacitorアプリ内では一次的なものとして扱ってください。Capacitorドキュメントに記載のストレージに関するガイドをお読みください。

さらに、より安全で永続的なストレージの仕組みが要件である場合、SDKを使用すると、カスタムのキャッシュを実装してトークンを保管することができます。

注意CapacitorのStorageプラグインは、iOSではUserDefaults、AndroidではSharedPreferencesによってバックアップされるため、トークンの保管に使用しないことをお勧めします。これらのAPIを使って保管されたデータは暗号化されません。セキュリティで保護されることもなく、クラウドと同期される可能性があります。

IonicとCapacitor(Angular)- 手順4 - 認証モジュールを登録して構成する

アプリがAuth0 Angular SDKで構成されました。今度は、アプリケーションを実行して、SDKがエラーなく初期化されること、そして、以前と同じように動作することを確認します。

-

Sorry about that. Here's a couple things to double check:

  • ensure the correct application is selected

  • did you save after entering your URLs?

  • make sure the domain and Client ID imported correctly

Still having issues? Check out our documentation or visit our community page to get more help.

+

すみません。いくつかの点をもう一度確認してください。

  • 正しいアプリケーションが選択されていることを確認します

  • URLを入力した後で保存しましたか?

  • ドメインとクライアントIDが正常にインポートされていることを確認します

まだお困りですか?当社提供のドキュメントまたはコミュニティページで詳しい情報を確認してください。

## アプリケーションにログインを追加する {{{ data-action="code" data-code="login-button.ts" }}} -

Capacitorアプリケーションでは、CapacitorのBrowserプラグインによって、Auth0のユニバーサルログインページにリダイレクトされます。loginWithRedirect関数のopenUrlパラメーターにBrowser.openの使用を設定し、デバイスのシステムブラウザーコンポーネント(iOSではSFSafariViewController、AndroidではChrome Custom Tabs)でURLが開くようにします。

SDKのloginWithRedirectメソッドは、デフォルトでwindow.location.hrefを使用して、ユーザーのデバイスにあるデフォルトのブラウザーアプリケーションでログインページを開きます。プラットフォームに適切なシステムブラウザーコンポーネントは使用しません。ユーザーが認証でアプリケーションを離れるため、ユーザーエクスペリエンスとしては最適ではありません。

IonicとCapacitor(Angular)- 手順5 - アプリケーションにログインを追加する

loginWithRedirect関数は、SDKにログインフローを開始するように指示します。openUrlパラメーターにログインURLを設定して、Browser.open関数を呼し出し、プラットフォームのシステムブラウザーコンポーネントでログインURLを開きます。これは、ユーザーがアプリケーションにログインする方法を提供します。ユーザーはAuth0のログインページにリダイレクトされ、エラーは一切受け取りません。

+

Capacitorアプリケーションでは、CapacitorのBrowserプラグインによって、Auth0のユニバーサルログインページにリダイレクトされます。loginWithRedirect関数のopenUrlパラメーターにBrowser.openの使用を設定し、デバイスのシステムブラウザーコンポーネント(iOSではSFSafariViewController、AndroidではChrome Custom Tabs)でURLが開くようにします。

SDKのloginWithRedirectメソッドは、デフォルトでwindow.location.hrefを使用して、ユーザーのデバイスにあるデフォルトのブラウザーアプリケーションでログインページを開きます。プラットフォームに適切なシステムブラウザーコンポーネントは使用しません。ユーザーが認証でアプリケーションを離れるため、ユーザーエクスペリエンスとしては最適ではありません。

IonicとCapacitor(Angular)- 手順5 - アプリケーションにログインを追加する

loginWithRedirect関数は、SDKにログインフローを開始するように指示します。openUrlパラメーターにログインURLを設定して、Browser.open関数を呼し出し、プラットフォームのシステムブラウザーコンポーネントでログインURLを開きます。これは、ユーザーがアプリケーションにログインする方法を提供します。ユーザーはAuth0のログインページにリダイレクトされ、エラーは一切受け取りません。

-

Sorry about that. Here's a couple things to double check:

  • ensure that there are no errors in the browser's console window at the point of login

  • ensure the domain and Client ID are correct according to your Auth0 application in the Dashboard

  • if you are redirected to Auth0 and receive an error page, check the "technical details" section at the bottom for the reason for the failure

+

すみません。いくつかの点をもう一度確認してください。

  • ログイン時にブラウザーのコンソールウィンドウでエラーが発生しないことを確認します

  • Auth0アプリケーションについて、DashboardでドメインとクライアントIDが正しいことを確認します

  • Auth0へのリダイレクトでエラーページを受け取った場合には、下部にある技術詳細セクションで失敗の理由を確認します

## ログインコールバックを処理する {{{ data-action="code" data-code="app.component.ts" }}} -

ユーザーがユニバーサルログインページでログインすると、カスタムURLスキームを使ったURLでアプリにリダイレクトされます。appUrlOpenイベントがアプリ内で処理されなければなりません。Auth0 SDKのhandleRedirectCallbackメソッドを呼び出すと、認証状態を初期化することができます。

このメソッドは、Auth0からのリダイレクトでのみ使用することができます。正常に機能していることを確認するには、URL内のcodestateパラメーターを確認します。

このイベントが発生した際に、Browser.close()メソッドがブラウザーを閉じるようにします。

appUrlOpenイベントのコールバックがngZone.runでラップされていることに注意してください。handleRedirectCallbackの実行時に発生するオブザーバブルへの変更は、Angularアプリが受け取ります。詳細については、「AngularをCapacitorと使用する」をお読みください。それ以外の場合では、画面がログイン後の認証状態で更新されません。

以下の説明では、カスタムURLスキームを使用して、アプリケーション内でコールバックを処理することを前提にしています。このためには、YOUR_PACKAGE_IDを選択したプラットのURLスキームで置き換えて登録します。詳細については、iOSには「カスタムURLスキームを定義する」、Androidには「アプリコンテンツ用のディープリンクを作成する」をお読みください。

IonicとCapacitor(Angular)- 手順6 - ログインコールバックを処理する

アプリケーションのAppコンポーネントにappUrlOpenを追加して、ログインします。ユーザーが認証して、アプリにログインすると、ブラウザーのウィンドウが閉じます。

+

ユーザーがユニバーサルログインページでログインすると、カスタムURLスキームを使ったURLでアプリにリダイレクトされます。appUrlOpenイベントがアプリ内で処理されなければなりません。Auth0 SDKのhandleRedirectCallbackメソッドを呼び出すと、認証状態を初期化することができます。

このメソッドは、Auth0からのリダイレクトでのみ使用することができます。正常に機能していることを確認するには、URL内のcodestateパラメーターを確認します。

このイベントが発生した際に、Browser.close()メソッドがブラウザーを閉じるようにします。

appUrlOpenイベントのコールバックがngZone.runでラップされていることに注意してください。handleRedirectCallbackの実行時に発生するオブザーバブルへの変更は、Angularアプリが受け取ります。詳細については、「AngularをCapacitorと使用する」をお読みください。それ以外の場合では、画面がログイン後の認証状態で更新されません。

以下の説明では、カスタムURLスキームを使用して、アプリケーション内でコールバックを処理することを前提にしています。このためには、YOUR_PACKAGE_IDを選択したプラットのURLスキームで置き換えて登録します。詳細については、iOSには「カスタムURLスキームを定義する」、Androidには「アプリコンテンツ用のディープリンクを作成する」をお読みください。

IonicとCapacitor(Angular)- 手順6 - ログインコールバックを処理する

アプリケーションのAppコンポーネントにappUrlOpenを追加して、ログインします。ユーザーが認証して、アプリにログインすると、ブラウザーのウィンドウが閉じます。

-

Sorry about that. Here's a couple things to double check:

+

すみません。いくつかの点をもう一度確認してください。

@@ -73,7 +73,7 @@ locale: ja-JP
-

Sorry about that. Here's a couple things to double check:

  • check that the URL you provided to in the returnTo parameter is registered as an allowed callback URL in your Auth0 Dashboard

+

すみません。いくつかの点をもう一度確認してください。

  • returnToパラメーターに指定したURLがAuth0 Dashboardで[Allowed Callback URLs(許可されているCallback URL)]に登録済みであることを確認します

@@ -84,6 +84,6 @@ locale: ja-JP
-

Sorry about that. Here's a couple things to double check:

  • check that you are only reading the user's profile when isLoading is false

  • check that user resolves to an object and is not undefined

+

すみません。いくつかの点をもう一度確認してください。

  • isLoadingfalseの場合に、ユーザーのプロファイルを読み出しているだけであることを確認します

  • userがオブジェクトに解決され、undefinedではないことを確認します

diff --git a/ja-jp/articles/quickstart/native/ionic-react/interactive.md b/ja-jp/articles/quickstart/native/ionic-react/interactive.md index 8400a620b8..7e6701b4ec 100644 --- a/ja-jp/articles/quickstart/native/ionic-react/interactive.md +++ b/ja-jp/articles/quickstart/native/ionic-react/interactive.md @@ -9,67 +9,67 @@ files: - files/app - files/user-profile github: - path: https://github.com/auth0-samples/auth0-ionic-samples/tree/main/react + path: react locale: ja-JP --- # Capacitorを用いたIonic React アプリにログインを追加する -

Auth0を使用すると、アプリケーションに手軽に認証を追加して、ユーザープロファイル情報にアクセスすることができます。このガイドは、Ionic(React)とCapacitorのアプリケーションにAuth0 React SDKを使ってAuth0を統合する方法を説明します。

+

Auth0を使用すると、アプリケーションに手軽に認証を追加して、ユーザープロファイル情報にアクセスすることができます。このガイドは、Ionic(React)とCapacitorのアプリケーションにAuth0 React SDKを使ってAuth0を統合する方法を説明します。

## 使用を開始する -

このクイックスタートは、IonicアプリケーションがCapacitorを使ってすでに実行されていることを前提としています。そうでない場合には、IonicフレームワークでCapacitorを使用するガイドを参照しながら簡単なアプリから始めるか、サンプリアプリを複製してください。

また、Capacitorの開発ワークフローを理解しておく必要もあります。

+

このクイックスタートは、IonicアプリケーションがCapacitorを使ってすでに実行されていることを前提としています。そうでない場合には、IonicフレームワークでCapacitorを使用するガイドを参照しながら簡単なアプリから始めるか、サンプリアプリを複製してください。

また、Capacitorの開発ワークフローを理解しておく必要もあります。

## Auth0を構成する -

Auth0のサービスを利用するには、Auth0 Dashboadに設定済みのアプリケーションがある必要があります。Auth0アプリケーションは、プロジェクトに対してどのように認証が動作して欲しいかを構成する場所です。

以下の説明では、「YOUR_PACKAGE_ID」を実際のアプリケーションのパッケージIDに置き換えてください。これは、capacitor.config.tsファイルのappIdフィールドで見つけて構成することができます。詳細については、Capacitorの構成スキーマを参照してください。

アプリケーションを構成する

対話型のセレクターを使ってAuth0アプリケーションを新規作成するか、統合したいプロジェクトを表す既存のアプリケーションを選択します。Auth0のすべてのアプリケーションには英数字からなる一意のクライアントIDが割り当てられており、アプリケーションのコードがSDKを通じてAuth0 APIを呼び出す際に使用されます。

このクイックスタートを使って構成されたすべての設定は、Dashboardのアプリケーションを自動更新します。今後、アプリケーションの管理もDashboardで行えます。

完了済みの構成を見てみたい場合は、サンプルアプリケーションをご覧ください。

Callback URLを構成する

Callback URLとは、Auth0がユーザーを認証後にリダイレクトするアプリケーション内URLです。設定されていない場合、ユーザーはログイン後にアプリケーションに戻りません。

サンプルプロジェクトに沿って進めている場合には、次の値に設定します:

YOUR_PACKAGE_ID://{yourTenant}.auth0.com/capacitor/YOUR_PACKAGE_ID/callback

ログアウトURLを構成する

ログアウトURLとは、Auth0がユーザーをログアウト後にリダイレクトするアプリケーション内URLです。設定されていない場合、ユーザーはアプリケーションからログアウトできず、エラーを受け取ります。

サンプルプロジェクトに沿って進めている場合には、次の値に設定します:

YOUR_PACKAGE_ID://{yourTenant}.auth0.com/capacitor/YOUR_PACKAGE_ID/callback

許可されているオリジンを構成する

ネイティブアプリケーションからAuth0へ要求を送信できるようにするには、アプリケーションの設定で次の許可されているオリジンを設定します。

サンプルプロジェクトに沿って進めている場合、capacitorにiOSとAndroidでそれぞれcapacitor://localhost, http://localhostを設定します。

最後に、アプリケーションの[Application Type(アプリケーションタイプ)][Native(ネイティブ)]になっていることをアプリケーションの設定で必ず確認してください。

+

Auth0のサービスを利用するには、Auth0 Dashboadに設定済みのアプリケーションがある必要があります。Auth0アプリケーションは、プロジェクトに対してどのように認証が動作して欲しいかを構成する場所です。

以下の説明では、「YOUR_PACKAGE_ID」を実際のアプリケーションのパッケージIDに置き換えてください。これは、capacitor.config.tsファイルのappIdフィールドで見つけて構成することができます。詳細については、Capacitorの構成スキーマを参照してください。

アプリケーションを構成する

対話型のセレクターを使ってAuth0アプリケーションを新規作成するか、統合したいプロジェクトを表す既存のアプリケーションを選択します。Auth0のすべてのアプリケーションには英数字からなる一意のクライアントIDが割り当てられており、アプリケーションのコードがSDKを通じてAuth0 APIを呼び出す際に使用されます。

このクイックスタートを使って構成されたすべての設定は、Dashboardのアプリケーションを自動更新します。今後、アプリケーションの管理もDashboardで行えます。

完了済みの構成を見てみたい場合は、サンプルアプリケーションをご覧ください。

Callback URLを構成する

Callback URLとは、Auth0がユーザーを認証後にリダイレクトするアプリケーション内URLです。設定されていない場合、ユーザーはログイン後にアプリケーションに戻りません。

サンプルプロジェクトに沿って進めている場合には、次の値に設定します:

YOUR_PACKAGE_ID://{yourTenant}.auth0.com/capacitor/YOUR_PACKAGE_ID/callback

ログアウトURLを構成する

ログアウトURLとは、Auth0がユーザーをログアウト後にリダイレクトするアプリケーション内URLです。設定されていない場合、ユーザーはアプリケーションからログアウトできず、エラーを受け取ります。

サンプルプロジェクトに沿って進めている場合には、次の値に設定します:

YOUR_PACKAGE_ID://{yourTenant}.auth0.com/capacitor/YOUR_PACKAGE_ID/callback

許可されているオリジンを構成する

ネイティブアプリケーションからAuth0へ要求を送信できるようにするには、アプリケーションの設定で次の許可されているオリジンを設定します。

サンプルプロジェクトに沿って進めている場合、capacitorにiOSとAndroidでそれぞれcapacitor://localhost, http://localhostを設定します。

最後に、アプリケーションの[Application Type(アプリケーションタイプ)][Native(ネイティブ)]になっていることをアプリケーションの設定で必ず確認してください。

## Auth0 React SDKをインストールする -

プロジェクトディレクトリで次のコマンドを実行して、Auth0 React SDKをインストールします:

npm install @auth0/auth0-react

SDKは、慣用的にReact Hooks高階コンポーネント(HOC)を使用して、Auth0をReactアプリケーションに統合しやすくするメソッドや変数を公開しています。

Capacitorプラグインをインストールする

このクイックスタートとサンプルでは、Capacitorの公式プラグインをいくつか使用しています。次のコマンドを使用して、これらをアプリにインストールします:

npm install @capacitor/browser @capacitor/app

  • @capacitor/browser:デバイスのシステムブラウザーと対話できるようになり、Auth0の認可エンドポイントへのURLを開くために使用されます。

  • @capacitor/app:高レベルのアプリイベントを受け取れるようになるため、Auth0からのコールバックを扱うのに便利です。

iOSのCapacitorのBrowserプラグインはSFSafariViewControllerを使用し、iOS 11以降ではデバイス上のSafariとクッキーを共有しません。つまり、これらのデバイスではSSOが機能しません。SSOが必要な場合には、ASWebAuthenticationSessionを使用する互換のプラグインを使用してください。

+

プロジェクトディレクトリで次のコマンドを実行して、Auth0 React SDKをインストールします:

npm install @auth0/auth0-react

SDKは、慣用的にReact Hooks高階コンポーネント(HOC)を使用して、Auth0をReactアプリケーションに統合しやすくするメソッドや変数を公開しています。

Capacitorプラグインをインストールする

このクイックスタートとサンプルでは、Capacitorの公式プラグインをいくつか使用しています。次のコマンドを使用して、これらをアプリにインストールします:

npm install @capacitor/browser @capacitor/app

  • @capacitor/browser:デバイスのシステムブラウザーと対話できるようになり、Auth0の認可エンドポイントへのURLを開くために使用されます。

  • @capacitor/app:高レベルのアプリイベントを受け取れるようになるため、Auth0からのコールバックを扱うのに便利です。

iOSのCapacitorのBrowserプラグインはSFSafariViewControllerを使用し、iOS 11以降ではデバイス上のSafariとクッキーを共有しません。つまり、これらのデバイスではSSOが機能しません。SSOが必要な場合には、ASWebAuthenticationSessionを使用する互換のプラグインを使用してください。

## Auth0Providerコンポーネントを構成する {{{ data-action="code" data-code="index.tsx" }}} -

内部では、Auth0 React SDKはReact Contextを使用して、ユーザーの認証状態を管理します。Auth0をReactアプリに統合する1つの方法として、SDKからインポート可能なAuth0Providerでルートコンポーネントをラップすることができます。

Auth0Providerコンポーネントは以下のプロパティを使用します。

  • domain:Auth0 Dashboardで作成したアプリケーションの設定にあるdomain値、またはAuth0のカスタムドメイン機能を使用する場合のカスタムドメインです。

  • clientId:Auth0 Dashboardで作成したアプリケーションの設定にあるクライアントID値です。

  • useRefreshTokens:AndroidまたはiOSでauth0-reactをIonicと使用するには、リフレッシュトークンを有効にする必要があります。

  • useRefreshTokensFallback:AndroidまたはiOSでauth0-reactをIonicと使用するには、iframeのフォールバックを無効にする必要があります。

  • authorizationParams.redirect_uri:Auth0で認証した後に、ユーザーをリダイレクトするURLです。

アプリケーションの閉開後に認証を継続するには、SDKを構成する際にcacheLocationlocalstorageに設定することをお勧めします。ただし、localstorageにトークンを保管するリスクを理解してください。また、状況によってはlocalstorageのデータが思いがけず復元される可能性もあるため、Capacitorアプリ内では一次的なものとして扱ってください。Capacitorドキュメントに記載のストレージに関するガイドをお読みください。

さらに、より安全で永続的なストレージの仕組みが要件である場合、SDKを使用すると、カスタムのキャッシュを実装してトークンを保管することができます。

注意CapacitorのStorageプラグインは、iOSではUserDefaults、AndroidではSharedPreferencesによってバックアップされるため、トークンの保管に使用しないことをお勧めします。これらのAPIを使って保管されたデータは暗号化されません。セキュリティで保護されることもなく、クラウドと同期される可能性があります。

Ionic と Capacitor(React)- 手順4 - Auth0Providerコンポーネントを構成する

Auth0ProviderコンポーネントがAppコンポーネントをラップするようにして追加してから、アプリケーションを実行し、SDKが正しく初期化されていること、そして、アプリケーションがAuth0に関連したエラーを投入していないことを確認します。

+

内部では、Auth0 React SDKはReact Contextを使用して、ユーザーの認証状態を管理します。Auth0をReactアプリに統合する1つの方法として、SDKからインポート可能なAuth0Providerでルートコンポーネントをラップすることができます。

Auth0Providerコンポーネントは以下のプロパティを使用します。

  • domain:Auth0 Dashboardで作成したアプリケーションの設定にあるdomain値、またはAuth0のカスタムドメイン機能を使用する場合のカスタムドメインです。

  • clientId:Auth0 Dashboardで作成したアプリケーションの設定にあるクライアントID値です。

  • useRefreshTokens:AndroidまたはiOSでauth0-reactをIonicと使用するには、リフレッシュトークンを有効にする必要があります。

  • useRefreshTokensFallback:AndroidまたはiOSでauth0-reactをIonicと使用するには、iframeのフォールバックを無効にする必要があります。

  • authorizationParams.redirect_uri:Auth0で認証した後に、ユーザーをリダイレクトするURLです。

アプリケーションの閉開後に認証を継続するには、SDKを構成する際にcacheLocationlocalstorageに設定することをお勧めします。ただし、localstorageにトークンを保管するリスクを理解してください。また、状況によってはlocalstorageのデータが思いがけず復元される可能性もあるため、Capacitorアプリ内では一次的なものとして扱ってください。Capacitorドキュメントに記載のストレージに関するガイドをお読みください。

さらに、より安全で永続的なストレージの仕組みが要件である場合、SDKを使用すると、カスタムのキャッシュを実装してトークンを保管することができます。

注意CapacitorのStorageプラグインは、iOSではUserDefaults、AndroidではSharedPreferencesによってバックアップされるため、トークンの保管に使用しないことをお勧めします。これらのAPIを使って保管されたデータは暗号化されません。セキュリティで保護されることもなく、クラウドと同期される可能性があります。

Ionic と Capacitor(React)- 手順4 - Auth0Providerコンポーネントを構成する

Auth0ProviderコンポーネントがAppコンポーネントをラップするようにして追加してから、アプリケーションを実行し、SDKが正しく初期化されていること、そして、アプリケーションがAuth0に関連したエラーを投入していないことを確認します。

-

Sorry about that. Here's a couple things to double check:

  • ensure the correct application is selected

  • did you save after entering your URLs?

  • make sure the domain and Client ID imported correctly

Still having issues? Check out our documentation or visit our community page to get more help.

+

すみません。いくつかの点をもう一度確認してください。

  • 正しいアプリケーションが選択されていることを確認します

  • URLを入力した後で保存しましたか?

  • ドメインとクライアントIDが正常にインポートされていることを確認します

まだお困りですか?当社提供のドキュメントまたはコミュニティページで詳しい情報を確認してください。

## アプリケーションにログインを追加する {{{ data-action="code" data-code="login-button.tsx" }}} -

Capacitorアプリケーションでは、CapacitorのBrowserプラグインによって、Auth0のユニバーサルログインページにリダイレクトされます。loginWithRedirect関数のopenUrlパラメーターにBrowser.openの使用を設定し、デバイスのシステムブラウザーコンポーネント(iOSではSFSafariViewController、AndroidではChrome Custom Tabs)でURLが開くようにします。

SDKのloginWithRedirectメソッドは、デフォルトでwindow.location.hrefを使用して、ユーザーのデバイスにあるデフォルトのブラウザーアプリケーションでログインページを開きます。プラットフォームに適切なシステムブラウザーコンポーネントは使用しません。ユーザーが認証でアプリケーションを離れるため、ユーザーエクスペリエンスとしては最適ではありません。

IonicとCapacitor(React)- 手順5 - アプリケーションにログインを追加する

loginWithRedirect関数は、SDKにログインフローを開始するように指示します。openUrlパラメーターにログインURLを設定して、Browser.open関数を呼び出し、プラットフォームのシステムブラウザーコンポーネントでログインURLを開きます。これは、ユーザーがアプリケーションにログインする方法を提供します。ユーザーはAuth0のログインページにリダイレクトされ、エラーは一切受け取りません。

+

Capacitorアプリケーションでは、CapacitorのBrowserプラグインによって、Auth0のユニバーサルログインページにリダイレクトされます。loginWithRedirect関数のopenUrlパラメーターにBrowser.openの使用を設定し、デバイスのシステムブラウザーコンポーネント(iOSではSFSafariViewController、AndroidではChrome Custom Tabs)でURLが開くようにします。

SDKのloginWithRedirectメソッドは、デフォルトでwindow.location.hrefを使用して、ユーザーのデバイスにあるデフォルトのブラウザーアプリケーションでログインページを開きます。プラットフォームに適切なシステムブラウザーコンポーネントは使用しません。ユーザーが認証でアプリケーションを離れるため、ユーザーエクスペリエンスとしては最適ではありません。

IonicとCapacitor(React)- 手順5 - アプリケーションにログインを追加する

loginWithRedirect関数は、SDKにログインフローを開始するように指示します。openUrlパラメーターにログインURLを設定して、Browser.open関数を呼び出し、プラットフォームのシステムブラウザーコンポーネントでログインURLを開きます。これは、ユーザーがアプリケーションにログインする方法を提供します。ユーザーはAuth0のログインページにリダイレクトされ、エラーは一切受け取りません。

-

Sorry about that. Here's a couple things to double check:

  • ensure that there are no errors in the browser's console window at the point of login

  • ensure the domain and Client ID are correct according to your Auth0 application in the dashboard

  • if you are redirected to Auth0 and receive an error page, check the "technical details" section at the bottom for the reason for the failure

+

すみません。いくつかの点をもう一度確認してください。

  • ログイン時にブラウザーのコンソールウィンドウでエラーが発生しないことを確認します

  • Auth0アプリケーションについて、DashboardでドメインとクライアントIDが正しいことを確認します

  • Auth0へのリダイレクトでエラーページを受け取った場合には、下部にある技術詳細セクションで失敗の理由を確認します

## ログインコールバックを処理する {{{ data-action="code" data-code="app.tsx" }}} -

ユーザーがユニバーサルログインページでログインすると、カスタムURLスキームを使ったURLでアプリにリダイレクトされます。appUrlOpenイベントがアプリ内で処理されなければなりません。Auth0 SDKのhandleRedirectCallbackメソッドを呼び出すと、認証状態を初期化することができます。

このメソッドは、Auth0からのリダイレクトでのみ使用することができます。正常に機能していることを確認するには、URL内のcodestateパラメーターを確認します。

このイベントが発生した際に、Browser.close()メソッドがブラウザーを閉じるようにします。

以下の説明では、カスタムURLスキームを使用して、アプリケーション内でコールバックを処理することを前提にしています。このためには、YOUR_PACKAGE_IDを選択したプラットのURLスキームで置き換えて登録します。詳細については、iOSには「カスタムURLスキームを定義する」、Androidには「アプリコンテンツ用のディープリンクを作成する」をお読みください。

IonicとCapacitor(React)- 手順6 - ログインコールバックを処理する

アプリケーションのAppコンポーネントにappUrlOpenを追加して、ログインします。ユーザーが認証して、アプリにログインすると、ブラウザーのウィンドウが閉じます。

+

ユーザーがユニバーサルログインページでログインすると、カスタムURLスキームを使ったURLでアプリにリダイレクトされます。appUrlOpenイベントがアプリ内で処理されなければなりません。Auth0 SDKのhandleRedirectCallbackメソッドを呼び出すと、認証状態を初期化することができます。

このメソッドは、Auth0からのリダイレクトでのみ使用することができます。正常に機能していることを確認するには、URL内のcodestateパラメーターを確認します。

このイベントが発生した際に、Browser.close()メソッドがブラウザーを閉じるようにします。

以下の説明では、カスタムURLスキームを使用して、アプリケーション内でコールバックを処理することを前提にしています。このためには、YOUR_PACKAGE_IDを選択したプラットのURLスキームで置き換えて登録します。詳細については、iOSには「カスタムURLスキームを定義する」、Androidには「アプリコンテンツ用のディープリンクを作成する」をお読みください。

IonicとCapacitor(React)- 手順6 - ログインコールバックを処理する

アプリケーションのAppコンポーネントにappUrlOpenを追加して、ログインします。ユーザーが認証して、アプリにログインすると、ブラウザーのウィンドウが閉じます。

-

Sorry about that. Here's a couple things to double check:

+

すみません。いくつかの点をもう一度確認してください。

## アプリケーションにログアウトを追加する {{{ data-action="code" data-code="logout-button.tsx" }}} -

ユーザーがログインできるようになりました。今度は、ログアウトする方法を構成する必要があります。ユーザーをAuth0のログアウトエンドポイントにリダイレクトし、ブラウザー内のセッションをクリアする必要があります。他の場合と同様に、ユーザーがアプリから離れることでユーザーエクスペリエンスが損なわれないように、CapacitorのBrowserプラグインがリダイレクトを処理するようにします。

Auth0 SDKを使用してIonicとCapacitorで実現するには、以下を行います。

  • アプリについて、ログアウト後にAuth0のリダイレクト先となるURLを構築します。これは、登録済みのカスタムスキームとAuth0ドメインを使ったURLです。これを、Auth0 Dashboardの[Allowed Logout URLs(許可されているログアウトURL)]の構成に追加します。

  • logoutを呼び出し、logoutParams.returnToパラメーターにリダイレクト先のURLを渡して、SDKからログアウトします。

  • CapacitorのBrowserプラグインを使用してBrowser.openでURLを開くコールバックに、openUrlパラメーターを設定します。

ログインの手順と同様に、logoutを呼び出す際にopenUrlを設定しないと、SDKがユーザーをログアウトURLにリダイレクトするのに、デバイスのデフォルトのブラウザーアプリケーションが使用されるため、ユーザーエクスペリエンスとしては最適ではありません。

IonicとCapacitor(React)- 手順7 - アプリケーションにログアウトを追加する

ユーザーがアプリケーションからログアウトする方法を提供します。Auth0にリダイレクトしてから、returnToパラメーターで指定したアドレスへ移動することを確認します。アプリケーションにログインしていないことを確認します。

+

ユーザーがログインできるようになりました。今度は、ログアウトする方法を構成する必要があります。ユーザーをAuth0のログアウトエンドポイントにリダイレクトし、ブラウザー内のセッションをクリアする必要があります。他の場合と同様に、ユーザーがアプリから離れることでユーザーエクスペリエンスが損なわれないように、CapacitorのBrowserプラグインがリダイレクトを処理するようにします。

Auth0 SDKを使用してIonicとCapacitorで実現するには、以下を行います。

  • アプリについて、ログアウト後にAuth0のリダイレクト先となるURLを構築します。これは、登録済みのカスタムスキームとAuth0ドメインを使ったURLです。これを、Auth0 Dashboardの[Allowed Logout URLs(許可されているログアウトURL)]の構成に追加します。

  • logoutを呼び出し、logoutParams.returnToパラメーターにリダイレクト先のURLを渡して、SDKからログアウトします。

  • CapacitorのBrowserプラグインを使用してBrowser.openでURLを開くコールバックに、openUrlパラメーターを設定します。

ログインの手順と同様に、logoutを呼び出す際にopenUrlを設定しないと、SDKがユーザーをログアウトURLにリダイレクトするのに、デバイスのデフォルトのブラウザーアプリケーションが使用されるため、ユーザーエクスペリエンスとしては最適ではありません。

IonicとCapacitor(React)- 手順7 - アプリケーションにログアウトを追加する

ユーザーがアプリケーションからログアウトする方法を提供します。Auth0にリダイレクトしてから、returnToパラメーターで指定したアドレスへ移動することを確認します。アプリケーションにログインしていないことを確認します。

@@ -84,6 +84,6 @@ locale: ja-JP
-

Sorry about that. Here's a couple things to double check:

  • check that you are only reading the user's profile when isLoading is false

  • check that user resolves to an object and is not undefined

+

すみません。いくつかの点をもう一度確認してください。

  • isLoadingfalseの場合に、ユーザーのプロファイルを読み出しているだけであることを確認します

  • userがオブジェクトに解決され、undefinedではないことを確認します

diff --git a/ja-jp/articles/quickstart/native/ionic-vue/interactive.md b/ja-jp/articles/quickstart/native/ionic-vue/interactive.md index 5c1e9b7a03..a52f0fd6aa 100644 --- a/ja-jp/articles/quickstart/native/ionic-vue/interactive.md +++ b/ja-jp/articles/quickstart/native/ionic-vue/interactive.md @@ -9,78 +9,78 @@ files: - files/App - files/UserProfile github: - path: https://github.com/auth0-samples/auth0-ionic-samples/tree/main/vue + path: vue locale: ja-JP --- # CapacitorアプリでIonic Vueにログインを追加する -

Auth0を使用すると、アプリケーションに手軽に認証を追加して、ユーザープロファイル情報にアクセスすることができます。このガイドは、Ionic(Vue)とCapacitrorのアプリケーションにAuth0 Vue SDKを使ってAuth0を統合する方法を説明します。

+

Auth0を使用すると、アプリケーションに手軽に認証を追加して、ユーザープロファイル情報にアクセスすることができます。このガイドは、Ionic(Vue)とCapacitrorのアプリケーションにAuth0 Vue SDKを使ってAuth0を統合する方法を説明します。

## 使用を開始する -

このクイックスタートは、IonicアプリケーションがCapacitorを使ってすでに実行されていることを前提としています。そうでない場合には、IonicフレームワークでCapacitorを使用するガイドを参照しながら簡単なアプリから始めるか、サンプルアプリを複製してください。

また、Capacitorの開発ワークフローを理解しておく必要もあります。

+

このクイックスタートは、IonicアプリケーションがCapacitorを使ってすでに実行されていることを前提としています。そうでない場合には、IonicフレームワークでCapacitorを使用するガイドを参照しながら簡単なアプリから始めるか、サンプルアプリを複製してください。

また、Capacitorの開発ワークフローを理解しておく必要もあります。

## Auth0を構成する -

Auth0のサービスを利用するには、Auth0 Dashboadに設定済みのアプリケーションがある必要があります。Auth0アプリケーションは、プロジェクトに対してどのように認証が動作して欲しいかを構成する場所です。

以下の説明では、YOUR_PACKAGE_IDを実際のアプリケーションのパッケージIDに置き換えてください。これは、capacitor.config.tsファイルのappIdフィールドで見つけて構成することができます。詳細については、Capacitorの構成スキーマを参照してください。

アプリケーションを構成する

対話型のセレクターを使ってAuth0アプリケーションを新規作成するか、統合したいプロジェクトを表す既存のアプリケーションを選択します。Auth0のすべてのアプリケーションには英数字からなる一意のクライアントIDが割り当てられており、アプリケーションのコードがSDKを通じてAuth0 APIを呼び出す際に使用されます。

このクイックスタートを使って構成されたすべての設定は、Dashboardのアプリケーションを自動更新します。今後、アプリケーションの管理もDashboardで行えます。

代わりに完了済みの構成を見てみたい場合は、サンプルアプリケーションをご覧ください。

Callback URLを構成する

Callback URLとは、Auth0がユーザーを認証後にリダイレクトするアプリケーション内URLです。設定されていない場合、ユーザーはログイン後にアプリケーションに戻りません。

サンプルプロジェクトに沿って進めている場合は、YOUR_PACKAGE_ID://{yourDomain}/capacitor/YOUR_PACKAGE_ID/callbackに設定してください。

ログアウトURLを構成する

ログアウトURLとは、Auth0がユーザーをログアウト後にリダイレクトするアプリケーション内URLです。設定されていない場合、ユーザーはアプリケーションからログアウトできず、エラーを受け取ります。

サンプルプロジェクトに沿って進めている場合は、YOUR_PACKAGE_ID://{yourDomain}/capacitor/YOUR_PACKAGE_ID/callbackに設定してください。

許可されているオリジンを構成する

ネイティブアプリケーションからAuth0へ要求を送信できるようにするには、アプリケーションの設定で次の許可されているオリジンを設定します。

サンプルプロジェクトに沿って進めている場合、iOSとAndroidでそれぞれcapacitor://localhost, http://localhostを設定します。

最後に、アプリケーションの[Application Type(アプリケーションタイプ)][Native(ネイティブ)]になっていることをアプリケーションの設定で必ず確認してください。

+

Auth0のサービスを利用するには、Auth0 Dashboadに設定済みのアプリケーションがある必要があります。Auth0アプリケーションは、プロジェクトに対してどのように認証が動作して欲しいかを構成する場所です。

以下の説明では、YOUR_PACKAGE_IDを実際のアプリケーションのパッケージIDに置き換えてください。これは、capacitor.config.tsファイルのappIdフィールドで見つけて構成することができます。詳細については、Capacitorの構成スキーマを参照してください。

アプリケーションを構成する

対話型のセレクターを使ってAuth0アプリケーションを新規作成するか、統合したいプロジェクトを表す既存のアプリケーションを選択します。Auth0のすべてのアプリケーションには英数字からなる一意のクライアントIDが割り当てられており、アプリケーションのコードがSDKを通じてAuth0 APIを呼び出す際に使用されます。

このクイックスタートを使って構成されたすべての設定は、Dashboardのアプリケーションを自動更新します。今後、アプリケーションの管理もDashboardで行えます。

代わりに完了済みの構成を見てみたい場合は、サンプルアプリケーションをご覧ください。

Callback URLを構成する

Callback URLとは、Auth0がユーザーを認証後にリダイレクトするアプリケーション内URLです。設定されていない場合、ユーザーはログイン後にアプリケーションに戻りません。

サンプルプロジェクトに沿って進めている場合は、YOUR_PACKAGE_ID://{yourDomain}/capacitor/YOUR_PACKAGE_ID/callbackに設定してください。

ログアウトURLを構成する

ログアウトURLとは、Auth0がユーザーをログアウト後にリダイレクトするアプリケーション内URLです。設定されていない場合、ユーザーはアプリケーションからログアウトできず、エラーを受け取ります。

サンプルプロジェクトに沿って進めている場合は、YOUR_PACKAGE_ID://{yourDomain}/capacitor/YOUR_PACKAGE_ID/callbackに設定してください。

許可されているオリジンを構成する

ネイティブアプリケーションからAuth0へ要求を送信できるようにするには、アプリケーションの設定で次の許可されているオリジンを設定します。

サンプルプロジェクトに沿って進めている場合、iOSとAndroidでそれぞれcapacitor://localhost, http://localhostを設定します。

最後に、アプリケーションの[Application Type(アプリケーションタイプ)][Native(ネイティブ)]になっていることをアプリケーションの設定で必ず確認してください。

## Auth0 Vue SDKをインストールする -

プロジェクトディレクトリで次のコマンドを実行して、Auth0 Vue SDKをインストールします:

npm install @auth0/auth0-vue

SDKはモジュールや認証サービスなど、Auth0をVueアプリケーションに慣用的に統合しやすくする種類をいくつか公開しています。

Capacitorプラグインをインストールする

このクイックスタートとサンプルでは、Capacitorの公式プラグインをいくつか使用しています。次のコマンドを使用して、これらをアプリにインストールします:

npm install @capacitor/browser @capacitor/app

  • @capacitor/browser:デバイスのシステムブラウザーと対話できるようになり、Auth0の認可エンドポイントへのURLを開くために使用されます

  • @capacitor/app:高レベルのアプリイベントを受け取れるようになるため、Auth0からのコールバックを扱うのに便利です

iOSのCapacitorのBrowserプラグインはSFSafariViewControllerを使用し、iOS 11以降ではデバイス上のSafariとクッキーを共有しません。つまり、これらのデバイスではSSOが機能しません。SSOが必要な場合には、ASWebAuthenticationSessionを使用する互換性のあるプラグインを使用してください。

+

プロジェクトディレクトリで次のコマンドを実行して、Auth0 Vue SDKをインストールします:

npm install @auth0/auth0-vue

SDKはモジュールや認証サービスなど、Auth0をVueアプリケーションに慣用的に統合しやすくする種類をいくつか公開しています。

Capacitorプラグインをインストールする

このクイックスタートとサンプルでは、Capacitorの公式プラグインをいくつか使用しています。次のコマンドを使用して、これらをアプリにインストールします:

npm install @capacitor/browser @capacitor/app

  • @capacitor/browser:デバイスのシステムブラウザーと対話できるようになり、Auth0の認可エンドポイントへのURLを開くために使用されます

  • @capacitor/app:高レベルのアプリイベントを受け取れるようになるため、Auth0からのコールバックを扱うのに便利です

iOSのCapacitorのBrowserプラグインはSFSafariViewControllerを使用し、iOS 11以降ではデバイス上のSafariとクッキーを共有しません。つまり、これらのデバイスではSSOが機能しません。SSOが必要な場合には、ASWebAuthenticationSessionを使用する互換性のあるプラグインを使用してください。

## CreateAuht0プラグインを構成する {{{ data-action="code" data-code="main.ts" }}} -

SDKは、SDKが機能するために必要なすべてのサービスを含んだコンポーザブル、createAuth0をエクスポートします。このコンポーザブルをアプリケーションに登録し、Auth0のドメインとクライアントIDで構成する必要があります。

createAuth0コンポーザブルは以下の構成を取ります。

  • domain:Auth0 Dashboardで作成したアプリケーションの[Settings(設定)]にあるdomain値、またはAuth0のカスタムドメイン機能を使用する場合のカスタムドメインです。

  • clientId:Auth0 Dashboardで作成したアプリケーションの[Settings(設定)]にあるクライアントID値です。

  • useRefreshTokens:AndroidまたはiOSでauth0-vueをIonicと使用するには、リフレッシュトークンを有効にする必要があります。

  • useRefreshTokensFallback:AndroidまたはiOSでauth0-vueをIonicと使用するには、iframeのフォールバックを無効にする必要があります。

  • authorizationParams.redirect_uri:Auth0で認証した後に、ユーザーをリダイレクトするURLです。

アプリケーションの閉開後に認証を継続するには、SDKを構成する際にcacheLocationlocalstorageに設定することをお勧めします。ただし、localstorageにトークンを保管するリスクを理解してください。また、状況によってはlocalstorageのデータが思いがけず復元される可能性もあるため、Capacitorアプリ内では一次的なものとして扱ってください。Capacitorドキュメントに記載のストレージに関するガイドをお読みください。

さらに、より安全で永続的なストレージの仕組みが要件である場合、SDKを使用すると、カスタムのキャッシュを実装してトークンを保管することができます。

注意CapacitorのStorageプラグインは、iOSではUserDefaults、AndroidではSharedPreferencesによってバックアップされるため、トークンの保管に使用しないことをお勧めします。これらのAPIを使って保管されたデータは暗号化されません。セキュリティで保護されることもなく、クラウドと同期される可能性があります。

ionic クイックスタート - 手順4「チェックポイント」

アプリがAuth0 Vue SDKで構成されました。今度は、アプリケーションを実行して、SDKがエラーなく初期化されること、そして、以前と同じように動作することを確認します。

+

SDKは、SDKが機能するために必要なすべてのサービスを含んだコンポーザブル、createAuth0をエクスポートします。このコンポーザブルをアプリケーションに登録し、Auth0のドメインとクライアントIDで構成する必要があります。

createAuth0コンポーザブルは以下の構成を取ります。

  • domain:Auth0 Dashboardで作成したアプリケーションの[Settings(設定)]にあるdomain値、またはAuth0のカスタムドメイン機能を使用する場合のカスタムドメインです。

  • clientId:Auth0 Dashboardで作成したアプリケーションの[Settings(設定)]にあるクライアントID値です。

  • useRefreshTokens:AndroidまたはiOSでauth0-vueをIonicと使用するには、リフレッシュトークンを有効にする必要があります。

  • useRefreshTokensFallback:AndroidまたはiOSでauth0-vueをIonicと使用するには、iframeのフォールバックを無効にする必要があります。

  • authorizationParams.redirect_uri:Auth0で認証した後に、ユーザーをリダイレクトするURLです。

アプリケーションの閉開後に認証を継続するには、SDKを構成する際にcacheLocationlocalstorageに設定することをお勧めします。ただし、localstorageにトークンを保管するリスクを理解してください。また、状況によってはlocalstorageのデータが思いがけず復元される可能性もあるため、Capacitorアプリ内では一次的なものとして扱ってください。Capacitorドキュメントに記載のストレージに関するガイドをお読みください。

さらに、より安全で永続的なストレージの仕組みが要件である場合、SDKを使用すると、カスタムのキャッシュを実装してトークンを保管することができます。

注意CapacitorのStorageプラグインは、iOSではUserDefaults、AndroidではSharedPreferencesによってバックアップされるため、トークンの保管に使用しないことをお勧めします。これらのAPIを使って保管されたデータは暗号化されません。セキュリティで保護されることもなく、クラウドと同期される可能性があります。

ionic クイックスタート - 手順4「チェックポイント」

アプリがAuth0 Vue SDKで構成されました。今度は、アプリケーションを実行して、SDKがエラーなく初期化されること、そして、以前と同じように動作することを確認します。

-

Sorry about that. Here's a couple things to double check:

  • ensure the correct application is selected

  • did you save after entering your URLs?

  • make sure the domain and Client ID imported correctly

Still having issues? Check out our documentation or visit our community page to get more help.

+

すみません。いくつかの点をもう一度確認してください。

  • 正しいアプリケーションが選択されていることを確認します

  • URLを入力した後で保存しましたか?

  • ドメインとクライアントIDが正常にインポートされていることを確認します

まだお困りですか?当社提供のドキュメントまたはコミュニティページで詳しい情報を確認してください。

## アプリケーションにログインを追加する {{{ data-action="code" data-code="LoginButton.vue" }}} -

Capacitorアプリケーションでは、CapacitorのBrowserプラグインによって、Auth0のユニバーサルログインページにリダイレクトされます。loginWithRedirect関数のopenUrlパラメーターにBrowser.openの使用を設定し、デバイスのシステムブラウザーコンポーネント(iOSではSFSafariViewController、AndroidではChrome Custom Tabs)でURLが開くようにします。

SDKのloginWithRedirectメソッドは、デフォルトでwindow.location.hrefを使用して、ユーザーのデバイスにあるデフォルトのブラウザーアプリケーションでログインページを開きます。プラットフォームに適切なシステムブラウザーコンポーネントは使用しません。ユーザーが認証でアプリケーションを離れるため、ユーザーエクスペリエンスとしては最適ではありません。

ionic手順5「チェックポイント」

loginWithRedirect関数は、SDKにログインフローを開始するように指示します。openUrlパラメーターを設定して、Browser.open関数を呼び出し、プラットフォームのシステムブラウザーコンポーネントでログインURLを開きます。これは、ユーザーがアプリケーションにログインする方法を提供します。ユーザーはAuth0のログインページにリダイレクトされ、エラーは一切受け取りません。

+

Capacitorアプリケーションでは、CapacitorのBrowserプラグインによって、Auth0のユニバーサルログインページにリダイレクトされます。loginWithRedirect関数のopenUrlパラメーターにBrowser.openの使用を設定し、デバイスのシステムブラウザーコンポーネント(iOSではSFSafariViewController、AndroidではChrome Custom Tabs)でURLが開くようにします。

SDKのloginWithRedirectメソッドは、デフォルトでwindow.location.hrefを使用して、ユーザーのデバイスにあるデフォルトのブラウザーアプリケーションでログインページを開きます。プラットフォームに適切なシステムブラウザーコンポーネントは使用しません。ユーザーが認証でアプリケーションを離れるため、ユーザーエクスペリエンスとしては最適ではありません。

ionic手順5「チェックポイント」

loginWithRedirect関数は、SDKにログインフローを開始するように指示します。openUrlパラメーターを設定して、Browser.open関数を呼び出し、プラットフォームのシステムブラウザーコンポーネントでログインURLを開きます。これは、ユーザーがアプリケーションにログインする方法を提供します。ユーザーはAuth0のログインページにリダイレクトされ、エラーは一切受け取りません。

-

Sorry about that. Here's a couple things to double check:

  • ensure that there are no errors in the browser's console window at the point of login

  • ensure the domain and Client ID are correct according to your Auth0 application in the dashboard

  • if you are redirected to Auth0 and receive an error page, check the "technical details" section at the bottom for the reason for the failure

+

すみません。いくつかの点をもう一度確認してください。

  • ログイン時にブラウザーのコンソールウィンドウでエラーが発生しないことを確認します

  • Auth0アプリケーションについて、DashboardでドメインとクライアントIDが正しいことを確認します

  • Auth0へのリダイレクトでエラーページを受け取った場合には、下部にある技術詳細セクションで失敗の理由を確認します

## ログインコールバックを処理する {{{ data-action="code" data-code="App.vue" }}} -

ユーザーがユニバーサルログインページでログインすると、カスタムURLスキームを使ったURLでアプリにリダイレクトされます。appUrlOpenイベントがアプリ内で処理されなければなりません。Auth0 SDKのhandleRedirectCallbackメソッドを呼び出すと、認証状態を初期化することができます。

このメソッドは、Auth0からのリダイレクトでのみ使用することができます。正常に機能していることを確認するには、URL内のcodestateパラメーターを確認します。

このイベントが発生した際に、Browser.close()メソッドがブラウザーを閉じるようにします。

以下の説明では、カスタムURLスキームを使用して、アプリケーション内でコールバックを処理することを前提にしています。このためには、YOUR_PACKAGE_IDを選択したプラットフォームのURLスキームで置き換えて登録します。詳細については、iOSには「カスタムURLスキームを定義する」、Androidには「アプリコンテンツ用のディープリンクを作成する」をお読みください。

ionic手順6「チェックポイント」

アプリケーションのAppコンポーネントセットアップにappUrlOpenを追加して、ログインします。ユーザーが認証して、アプリにログインすると、ブラウザーのウィンドウが閉じます。

+

ユーザーがユニバーサルログインページでログインすると、カスタムURLスキームを使ったURLでアプリにリダイレクトされます。appUrlOpenイベントがアプリ内で処理されなければなりません。Auth0 SDKのhandleRedirectCallbackメソッドを呼び出すと、認証状態を初期化することができます。

このメソッドは、Auth0からのリダイレクトでのみ使用することができます。正常に機能していることを確認するには、URL内のcodestateパラメーターを確認します。

このイベントが発生した際に、Browser.close()メソッドがブラウザーを閉じるようにします。

以下の説明では、カスタムURLスキームを使用して、アプリケーション内でコールバックを処理することを前提にしています。このためには、YOUR_PACKAGE_IDを選択したプラットフォームのURLスキームで置き換えて登録します。詳細については、iOSには「カスタムURLスキームを定義する」、Androidには「アプリコンテンツ用のディープリンクを作成する」をお読みください。

ionic手順6「チェックポイント」

アプリケーションのAppコンポーネントセットアップにappUrlOpenを追加して、ログインします。ユーザーが認証して、アプリにログインすると、ブラウザーのウィンドウが閉じます。

-

Sorry about that. Here's a couple things to double check:

+

すみません。いくつかの点をもう一度確認してください。

## アプリケーションにログアウトを追加する {{{ data-action="code" data-code="LogoutButton.vue" }}} -

ユーザーがログインできるようになりました。今度は、ログアウトする方法を構成する必要があります。ユーザーをAuth0のログアウトエンドポイントにリダイレクトし、ブラウザー内のセッションをクリアする必要があります。他の場合と同様に、ユーザーがアプリから離れることでユーザーエクスペリエンスが損なわれないように、CapacitorのBrowserプラグインがリダイレクトを処理するようにします。

Auth0 SDKを使用してIonicとCapacitorで実現するには、以下を行います。

  • アプリについて、ログアウト後にAuth0のリダイレクト先となるURLを構築します。これは、登録済みのカスタムスキームとAuth0ドメインを使ったURLです。これを、Auth0 Dashboardの[Allowed Logout URLs(許可されているログアウトURL)]の構成に追加します。

  • logoutを呼び出し、logoutParams.returnToパラメーターにリダイレクト先のURLを渡して、SDKからログアウトします。

  • CapacitorのBrowserプラグインを使用してBrowser.openでURLを開くコールバックに、openUrlパラメーターを設定します。

ログインの手順と同様に、logoutを呼び出す際にopenUrlを設定しないと、SDKがユーザーをログアウトURLにリダイレクトするのに、デバイスのデフォルトのブラウザーアプリケーションが使用されるため、ユーザーエクスペリエンスとしては最適ではありません。

ionic手順7「チェックポイント」

ユーザーがアプリケーションからログアウトする方法を提供します。Auth0にリダイレクトしてから、returnToパラメーターで指定したアドレスへ移動することを確認します。アプリケーションにログインしていないことを確認します。

+

ユーザーがログインできるようになりました。今度は、ログアウトする方法を構成する必要があります。ユーザーをAuth0のログアウトエンドポイントにリダイレクトし、ブラウザー内のセッションをクリアする必要があります。他の場合と同様に、ユーザーがアプリから離れることでユーザーエクスペリエンスが損なわれないように、CapacitorのBrowserプラグインがリダイレクトを処理するようにします。

Auth0 SDKを使用してIonicとCapacitorで実現するには、以下を行います。

  • アプリについて、ログアウト後にAuth0のリダイレクト先となるURLを構築します。これは、登録済みのカスタムスキームとAuth0ドメインを使ったURLです。これを、Auth0 Dashboardの[Allowed Logout URLs(許可されているログアウトURL)]の構成に追加します。

  • logoutを呼び出し、logoutParams.returnToパラメーターにリダイレクト先のURLを渡して、SDKからログアウトします。

  • CapacitorのBrowserプラグインを使用してBrowser.openでURLを開くコールバックに、openUrlパラメーターを設定します。

ログインの手順と同様に、logoutを呼び出す際にopenUrlを設定しないと、SDKがユーザーをログアウトURLにリダイレクトするのに、デバイスのデフォルトのブラウザーアプリケーションが使用されるため、ユーザーエクスペリエンスとしては最適ではありません。

ionic手順7「チェックポイント」

ユーザーがアプリケーションからログアウトする方法を提供します。Auth0にリダイレクトしてから、returnToパラメーターで指定したアドレスへ移動することを確認します。アプリケーションにログインしていないことを確認します。

-

Sorry about that. Here's a couple things to double check:

  • check that the URL you provided to in the returnTo parameter is registered as an allowed callback URL in your Auth0 Dashboard

+

すみません。いくつかの点をもう一度確認してください。

  • returnToパラメーターに指定したURLがAuth0 Dashboardで[Allowed Callback URLs(許可されているCallback URL)]に登録済みであることを確認します

## ユーザープロファイルを表示する {{{ data-action="code" data-code="UserProfile.vue" }}} -

Auth0 Vue SDKは必要な任意のコンポーネントについて、名前やプロフィール写真など、ログイン済みのユーザーに関連付けられたユーザープロファイルを取得し、ユーザーインターフェイスをパーソナライズします。プロファイル情報は、useAuth0()コンポーザブルが公開するuserプロパティを介して使用することができます。

SDKの初期化は非同期に行われます。isLoadinguserプロパティを確認して、ユーザープロファイルを保護する必要があります。isLoadingfalseになり、userが値を持つと、ユーザープロファイルを利用することができます。

ionic手順8「チェックポイント」

ユーザーがアプリ内でユーザープロファイルの詳細を表示できる手段を提供し、ログインした後に自分のプロファイル情報を取得して画面に表示できることを確認します。

+

Auth0 Vue SDKは必要な任意のコンポーネントについて、名前やプロフィール写真など、ログイン済みのユーザーに関連付けられたユーザープロファイルを取得し、ユーザーインターフェイスをパーソナライズします。プロファイル情報は、useAuth0()コンポーザブルが公開するuserプロパティを介して使用することができます。

SDKの初期化は非同期に行われます。isLoadinguserプロパティを確認して、ユーザープロファイルを保護する必要があります。isLoadingfalseになり、userが値を持つと、ユーザープロファイルを利用することができます。

ionic手順8「チェックポイント」

ユーザーがアプリ内でユーザープロファイルの詳細を表示できる手段を提供し、ログインした後に自分のプロファイル情報を取得して画面に表示できることを確認します。

diff --git a/ja-jp/articles/quickstart/native/ios-swift/interactive.md b/ja-jp/articles/quickstart/native/ios-swift/interactive.md index 411f08af56..09d7f3df15 100644 --- a/ja-jp/articles/quickstart/native/ios-swift/interactive.md +++ b/ja-jp/articles/quickstart/native/ios-swift/interactive.md @@ -8,19 +8,19 @@ files: - files/ProfileView - files/User github: - path: https://github.com/auth0-samples/auth0-ios-swift-sample/tree/master/Sample-01 + path: Sample-01 locale: ja-JP --- # iOSまたはmacOSアプリケーションにログインを追加する -

このガイドは、Auth0.swift SDKを使って、iOSやmacOSアプリで認証の追加とユーザプロファイル情報へのにアクセスを行う方法について説明します。

このクイックスタートを使用するには、以下の手順に従います:

  • Auth0の無料アカウントにサインアップするか、Auth0にログインします。

  • 統合したいiOSまたはmacOSのアプリを準備します。または、ログインした後に、サンプルアプリを表示してダウンロードすることもできます。

+

このガイドは、Auth0.swift SDKを使って、iOSやmacOSアプリで認証の追加とユーザプロファイル情報へのにアクセスを行う方法について説明します。

このクイックスタートを使用するには、以下の手順に従います:

  • Auth0の無料アカウントにサインアップするか、Auth0にログインします。

  • 統合したいiOSまたはmacOSのアプリを準備します。または、ログインした後に、サンプルアプリを表示してダウンロードすることもできます。

## Auth0を構成する -

Auth0のサービスを利用するには、Auth0 Dashboadに設定済みのアプリケーションが必要です。Auth0アプリケーションは、開発中のアプリに対してどのように認証が動作して欲しいかを構成する場所です。

Auth0アプリケーションを構成する

対話型のセレクターを使ってAuth0アプリケーションを新規作成するか、既存のネイティブのAuth0アプリケーションを選択します。Auth0のすべてのアプリケーションには英数字からなる一意のクライアントIDが割り当てられており、アプリがSDKを通じてAuth0 APIを呼び出す際に使用されます。

このクイックスタートを使って構成されたすべての設定は、DashboardのAuth0アプリケーションを自動更新します。今後、アプリケーションの管理もDashboardで行えます。

完了済みの構成を見てみたい場合は、サンプルアプリをご覧ください。

Callback URLとログアウトURLを構成する

Auth0はリダイレクトでユーザーをアプリに戻すため、Callback URLとログアウトURLを呼び出します。Auth0は、ユーザーを認証した後にCallback URLを呼び出し、セッションのクッキーを削除した後にログアウトURLを呼び出します。Callback URLとログインURLを設定しないと、ユーザーはアプリにログインやログアウトが行えなくなり、アプリにエラーが発生します。

iOS 17.4以降とmacOS 14.4以降では、ユニバーサルリンクをCallback URLおよびログアウトURLとして使用できます。有効になっている場合、古いバージョンのiOS/macOSでは、Auth0.swiftはフォールバックとしてカスタムURLスキームを使用します。

この機能にはXcode 15.3以降と有料のApple Developerアカウントが必要です。

アプリのプラットフォームに応じて、以下のCallback URLログアウトURLを追加してください。カスタムドメインがある場合は、Auth0テナントのドメインに代わってそちらを使用します。

iOS

https://${account.namespace}/ios/YOUR_BUNDLE_IDENTIFIER/callback,
+

Auth0のサービスを利用するには、Auth0 Dashboadに設定済みのアプリケーションが必要です。Auth0アプリケーションは、開発中のアプリに対してどのように認証が動作して欲しいかを構成する場所です。

Auth0アプリケーションを構成する

対話型のセレクターを使ってAuth0アプリケーションを新規作成するか、既存のネイティブのAuth0アプリケーションを選択します。Auth0のすべてのアプリケーションには英数字からなる一意のクライアントIDが割り当てられており、アプリがSDKを通じてAuth0 APIを呼び出す際に使用されます。

このクイックスタートを使って構成されたすべての設定は、DashboardのAuth0アプリケーションを自動更新します。今後、アプリケーションの管理もDashboardで行えます。

完了済みの構成を見てみたい場合は、サンプルアプリをご覧ください。

Callback URLとログアウトURLを構成する

Auth0はリダイレクトでユーザーをアプリに戻すため、Callback URLとログアウトURLを呼び出します。Auth0は、ユーザーを認証した後にCallback URLを呼び出し、セッションのクッキーを削除した後にログアウトURLを呼び出します。Callback URLとログインURLを設定しないと、ユーザーはアプリにログインやログアウトが行えなくなり、アプリにエラーが発生します。

iOS 17.4以降とmacOS 14.4以降では、ユニバーサルリンクをCallback URLおよびログアウトURLとして使用できます。有効になっている場合、古いバージョンのiOS/macOSでは、Auth0.swiftはフォールバックとしてカスタムURLスキームを使用します。

この機能にはXcode 15.3以降と有料のApple Developerアカウントが必要です。

アプリのプラットフォームに応じて、以下のCallback URLログアウトURLを追加してください。カスタムドメインがある場合は、Auth0テナントのドメインに代わってそちらを使用します。

iOS

https://${account.namespace}/ios/YOUR_BUNDLE_IDENTIFIER/callback,
 
 YOUR_BUNDLE_IDENTIFIER://${account.namespace}/ios/YOUR_BUNDLE_IDENTIFIER/callback
 
@@ -38,7 +38,7 @@ com.example.MyApp://example.us.auth0.com/ios/com.example.MyApp/callback
 
 
-

関連ドメインを構成する

この手順では有料のApple Developerアカウントが必要になります。Callback URLおよびログアウトURLとしてユニバーサルリンクを使用する必要があります。代わりにカスタムURLスキームを使用する場合はこの手順をスキップしてください。

チームIDとバンドル識別子を構成する

Auth0アプリケーションの設定ページに移動して最後までスクロールし、 [Advanced Settings(詳細設定)]>[Device Settings(デバイス設定)]を開きます。[iOS]セクションで[Team ID(チームID)]Apple Team IDを、[App ID(アプリID)]にアプリのバンドルIDを設定します。

Auth0 Dashboard> [Applications(アプリケーション)] > [Applications(アプリケーション)] > [Native App(ネイティブアプリ)] > [Settings(設定)]タブ > [Advanced Settings(詳細設定)] > [Device Settings(デバイス設定)]タブ

これで、アプリがAuth0テナントのapple-app-site-associationファイルに追加されます。

関連ドメインの機能を追加する

Xcodeで、アプリのターゲット設定の[Signing & Capabilities(署名と機能)]タブに移動し、[+ Capability(+機能)]ボタンを押します。それから[Associated Domains(関連ドメイン)]を選択します。

[Xcode]> [Signing & Capabilities(署名と機能)]タブ > [Add New(新規追加)] > [Associated Domains(関連ドメイン)]

次に、以下の エントリー[Associated Domains(関連ドメイン)]の下に追加します:

webcredentials:labs-fundtraining.us.auth0.com
+

関連ドメインを構成する

この手順では有料のApple Developerアカウントが必要になります。Callback URLおよびログアウトURLとしてユニバーサルリンクを使用する必要があります。代わりにカスタムURLスキームを使用する場合はこの手順をスキップしてください。

チームIDとバンドル識別子を構成する

Auth0アプリケーションの設定ページに移動して最後までスクロールし、 [Advanced Settings(詳細設定)]>[Device Settings(デバイス設定)]を開きます。[iOS]セクションで[Team ID(チームID)]Apple Team IDを、[App ID(アプリID)]にアプリのバンドルIDを設定します。

Auth0 Dashboard> [Applications(アプリケーション)] > [Applications(アプリケーション)] > [Native App(ネイティブアプリ)] > [Settings(設定)]タブ > [Advanced Settings(詳細設定)] > [Device Settings(デバイス設定)]タブ

これで、アプリがAuth0テナントのapple-app-site-associationファイルに追加されます。

関連ドメインの機能を追加する

Xcodeで、アプリのターゲット設定の[Signing & Capabilities(署名と機能)]タブに移動し、[+ Capability(+機能)]ボタンを押します。それから[Associated Domains(関連ドメイン)]を選択します。

[Xcode]> [Signing & Capabilities(署名と機能)]タブ > [Add New(新規追加)] > [Associated Domains(関連ドメイン)]

次に、以下の エントリー[Associated Domains(関連ドメイン)]の下に追加します:

webcredentials:labs-fundtraining.us.auth0.com
 
 
@@ -51,56 +51,56 @@ com.example.MyApp://example.us.auth0.com/ios/com.example.MyApp/callback
-

それから依存ルールを選択して[Add Package(パッケージを追加)]を押します。

SPMの詳細については、公式ドキュメントを確認してください。

CocoaPodsを使用する

以下のラインをPodfileに追加します:

pod 'Auth0', '~> 2.0'
+

それから依存ルールを選択して[Add Package(パッケージを追加)]を押します。

SPMの詳細については、公式ドキュメントを確認してください。

CocoaPodsを使用する

以下のラインをPodfileに追加します:

pod 'Auth0', '~> 2.0'
 
 
-

それからpod installを実行します。

CocoaPodsの詳細は、公式ドキュメントを確認してください。

Carthageを使用する

以下のラインをCartfileに追加します:

github "auth0/Auth0.swift" ~> 2.0
+

それからpod installを実行します。

CocoaPodsの詳細は、公式ドキュメントを確認してください。

Carthageを使用する

以下のラインをCartfileに追加します:

github "auth0/Auth0.swift" ~> 2.0
 
 
-

それからcarthage bootstrap --use-xcframeworksを実行します。

Carthageの詳細については、公式ドキュメントを確認してください。

+

それからcarthage bootstrap --use-xcframeworksを実行します。

Carthageの詳細については、公式ドキュメントを確認してください。

## SDKを構成する {{{ data-action="code" data-code="Auth0.plist" }}} -

Auth0.swiftのSDKにはAuth0domainClient IDが必要です。これらの値はAuth0アプリケーションの設定ページで確認できます

  • domain:Auth0テナントのドメインです。カスタムドメインがある場合は、Auth0テナントのドメインではなくそちらを使用してください。

  • クライアントID:このクイックスタートで前にセットアップした、Auth0アプリケーションの英数字からなる一意のIDです。

Auth0ドメインとクライアントIDの値を含むアプリバンドルにAuth0.plistという名前のplistファイルを作成します。

SDKはプログラムコードによって構成することも可能です。詳細はREADMEをご覧ください。

iOS Swiftクイックスタート - 手順3「チェックポイント」

Auth0.swift SDKの構成を完了しました。アプリを実行して、SDKに関連したエラーを出していないことを確認します。

+

Auth0.swiftのSDKにはAuth0domainClient IDが必要です。これらの値はAuth0アプリケーションの設定ページで確認できます

  • domain:Auth0テナントのドメインです。カスタムドメインがある場合は、Auth0テナントのドメインではなくそちらを使用してください。

  • クライアントID:このクイックスタートで前にセットアップした、Auth0アプリケーションの英数字からなる一意のIDです。

Auth0ドメインとクライアントIDの値を含むアプリバンドルにAuth0.plistという名前のplistファイルを作成します。

SDKはプログラムコードによって構成することも可能です。詳細はREADMEをご覧ください。

iOS Swiftクイックスタート - 手順3「チェックポイント」

Auth0.swift SDKの構成を完了しました。アプリを実行して、SDKに関連したエラーを出していないことを確認します。

-

If your app produces errors related to the SDK:

  • Make sure you selected the correct Auth0 application

  • Verify you saved your URL updates

  • Ensure you set the Auth0 domain and Client ID correctly

Still having issues? Check out our documentation or visit our community page to get more help.

+

アプリでSDK関連のエラーが発生する場合には以下を行います。

  • 正しいAuth0アプリケーションが選択されていることを確認します

  • URLを更新した後で保存したことを確認します

  • Auth0のドメインとクライアントIDが正しく設定されていることを確認します

まだお困りですか?当社提供のドキュメントまたはコミュニティページで詳しい情報を確認してください。

## アプリケーションにログインを追加する {{{ data-action="code" data-code="MainView.swift#20:31" }}} -

ログインページを提示したいファイルにAuth0モジュールをインポートします。それからログインボタンのアクションでユニバーサルログインページを提示します。

コールバックに基づいたAPIの代わりにasync/awaitまたはCombineを使用できます。詳細はREADMEをご覧ください。

iOSアプリのユニバーサルログイン画面の例

iOS Swiftクイックスタート - 手順4「チェックポイント」

ログインボタンを押して次の点を確認します:

  • アラートボックスが表示され、同意を求める。

  • [Continue(続行)]を選択するとSafariモーダルでユニバーサルログインページが開く。

  • ユーザー名とパスワード、またはソーシャルプロバイダーを使って、ログインまたはサインアップできる。

  • その後、Safariモーダルが自動的に閉じる。

+

ログインページを提示したいファイルにAuth0モジュールをインポートします。それからログインボタンのアクションでユニバーサルログインページを提示します。

コールバックに基づいたAPIの代わりにasync/awaitまたはCombineを使用できます。詳細はREADMEをご覧ください。

iOSアプリのユニバーサルログイン画面の例

iOS Swiftクイックスタート - 手順4「チェックポイント」

ログインボタンを押して次の点を確認します:

  • アラートボックスが表示され、同意を求める。

  • [Continue(続行)]を選択するとSafariモーダルでユニバーサルログインページが開く。

  • ユーザー名とパスワード、またはソーシャルプロバイダーを使って、ログインまたはサインアップできる。

  • その後、Safariモーダルが自動的に閉じる。

-

If login fails or produces errors:

  • Verify you entered the correct callback URL

  • Ensure you set the Auth0 domain and Client ID correctly

Still having issues? Check out our documentation or visit our community page to get more help.

+

ログインが失敗するか、エラーが起きる場合には以下を行います。

  • 正しいCallback URLが入力されていることを確認します

  • Auth0のドメインとクライアントIDが正しく設定されていることを確認します

まだお困りですか?当社提供のドキュメントまたはコミュニティページで詳しい情報を確認してください。

## アプリケーションにログアウトを追加する {{{ data-action="code" data-code="MainView.swift#34:45" }}} -

アプリにログインできるようになったら、ログアウトする方法が必要です。ログアウトボタンのアクションでclearSession()メソッドを呼び出し、ユニバーサルログインセッションのクッキーを消去します。

iOS Swiftクイックスタート - 手順5「チェックポイント」

ログアウトボタンを押して次の点を確認します:

  • アラートボックスが表示され、同意を求める。

  • [Continue(続行)]を選択するとSafariモーダルでページが開く。

  • その直後にSafariモーダルが自動的に閉じる。

+

アプリにログインできるようになったら、ログアウトする方法が必要です。ログアウトボタンのアクションでclearSession()メソッドを呼び出し、ユニバーサルログインセッションのクッキーを消去します。

iOS Swiftクイックスタート - 手順5「チェックポイント」

ログアウトボタンを押して次の点を確認します:

  • アラートボックスが表示され、同意を求める。

  • [Continue(続行)]を選択するとSafariモーダルでページが開く。

  • その直後にSafariモーダルが自動的に閉じる。

-

If logout fails or produces errors:

  • Verify you entered the correct callback URL

  • Ensure you set the Auth0 domain and Client ID correctly

Still having issues? Check out our documentation or visit our community page to get more help.

+

ログアウトが失敗するか、エラーが起きる場合には以下を行います。

  • 正しいCallback URLが入力されていることを確認します

  • Auth0のドメインとクライアントIDが正しく設定されていることを確認します

まだお困りですか?当社提供のドキュメントまたはコミュニティページで詳しい情報を確認してください。

## ユーザープロファイル情報にアクセスする {{{ data-action="code" data-code="User.swift#11:14" }}} -

ログイン後に得るCredentialsインスタンスにはIDトークンが含まれます。IDトークンは、ログインしたユーザーに関連するプロファイル情報(メールアドレスやプロフィール写真など)を含みます。これらの詳細情報はアプリのユーザーインターフェイスをパーソナライズするために使用できます。

Auth0.swiftのSDKには、IDトークンのようなJWTをデコードするためのユーティリティが含まれています。ユーザープロファイル情報にアクセスしたいファイルへJWTDecodeモジュールをインポートすることで開始します。それから、decode(jwt:)メソッドを使ってIDトークンをデコードし、そこに含まれるクレームにアクセスします。

最新のユーザー情報はuserInfo(withAccessToken:)メソッドで取得できます。詳細はEXAMPLESをご覧ください。

iOS Swiftクイックスタート - 手順6「チェックポイント」

ログイン後にemailpicture、その他すべてのクレームにアクセスできることを確認します。

+

ログイン後に得るCredentialsインスタンスにはIDトークンが含まれます。IDトークンは、ログインしたユーザーに関連するプロファイル情報(メールアドレスやプロフィール写真など)を含みます。これらの詳細情報はアプリのユーザーインターフェイスをパーソナライズするために使用できます。

Auth0.swiftのSDKには、IDトークンのようなJWTをデコードするためのユーティリティが含まれています。ユーザープロファイル情報にアクセスしたいファイルへJWTDecodeモジュールをインポートすることで開始します。それから、decode(jwt:)メソッドを使ってIDトークンをデコードし、そこに含まれるクレームにアクセスします。

最新のユーザー情報はuserInfo(withAccessToken:)メソッドで取得できます。詳細はEXAMPLESをご覧ください。

iOS Swiftクイックスタート - 手順6「チェックポイント」

ログイン後にemailpicture、その他すべてのクレームにアクセスできることを確認します。

-

If you cannot access the user information:

  • Verify you imported the JWTDecode module where you invoke the decode(jwt:) method

  • Make sure you spelled your claims correctly

Still having issues? Check out our documentation or visit our community forums to get more help.

+

ユーザー情報にアクセスできない場合は以下を行います。

  • decode(jwt:)メソッドを呼び出すJWTDecodeモジュールがインポートされていることを確認します

  • クレームの綴りが間違っていないことを確認します

まだお困りですか?当社提供のドキュメントまたはコミュニティフォーラムで詳しい情報を確認してください。

diff --git a/ja-jp/articles/quickstart/native/maui/interactive.md b/ja-jp/articles/quickstart/native/maui/interactive.md index 38cd7899ea..8a966f5476 100644 --- a/ja-jp/articles/quickstart/native/maui/interactive.md +++ b/ja-jp/articles/quickstart/native/maui/interactive.md @@ -5,24 +5,24 @@ interactive: true files: - files/MainPage.xaml github: - path: https://github.com/auth0-samples/auth0-maui-samples/tree/master/Sample + path: Sample locale: ja-JP --- # MAUIアプリケーションにログインを追加する -

Auth0を使用すると、アプリケーションに手軽に認証を追加することができます。このガイドは、.NET MAUIアプリケーションにMAUI用のAuth0 SDKを使ってAuth0を統合し、認証の追加とユーザープロファイル情報の表示を行う方法について説明します。

MAUI SDKは、Android、iOS、macOS、Windowsに対応しています。プラットフォーム特有の構成に関しては、以下をお読みください。

+

Auth0を使用すると、アプリケーションに手軽に認証を追加することができます。このガイドは、.NET MAUIアプリケーションにMAUI用のAuth0 SDKを使ってAuth0を統合し、認証の追加とユーザープロファイル情報の表示を行う方法について説明します。

MAUI SDKは、Android、iOS、macOS、Windowsに対応しています。プラットフォーム特有の構成に関しては、以下をお読みください。

## Auth0を構成する -

Auth0のサービスを利用するには、Auth0 Dashboadに設定済みのアプリケーションがある必要があります。Auth0アプリケーションは、開発中のプロジェクトに対してどのように認証が動作して欲しいかを構成する場所です。

アプリケーションを構成する

対話型のセレクターを使ってAuth0アプリケーションを新規作成するか、統合したいプロジェクトを表す既存のアプリケーションを選択します。Auth0のすべてのアプリケーションには英数字からなる一意のクライアントIDが割り当てられており、アプリケーションのコードがSDKを通じてAuth0 APIを呼び出す際に使用されます。

このクイックスタートを使って構成されたすべての設定は、Dashboardのアプリケーションを自動更新します。今後、アプリケーションの管理もDashboardで行えます。

完了済みの構成を見てみたい場合は、サンプルアプリケーションをご覧ください。

Callback URLを構成する

Callback URLとは、Auth0がユーザーを認証後にリダイレクトするアプリケーション内URLです。設定されていない場合、ユーザーはログイン後にアプリケーションに戻りません。

サンプルプロジェクトに沿って進めている場合は、myapp://callbackに設定してください。

ログアウトURLを構成する

ログアウトURLとは、Auth0がユーザーをログアウト後にリダイレクトするアプリケーション内URLです。設定されていない場合、ユーザーはアプリケーションからログアウトできず、エラーを受け取ります。

サンプルプロジェクトに沿って進めている場合は、myapp://callbackに設定してください。

+

Auth0のサービスを利用するには、Auth0 Dashboadに設定済みのアプリケーションがある必要があります。Auth0アプリケーションは、開発中のプロジェクトに対してどのように認証が動作して欲しいかを構成する場所です。

アプリケーションを構成する

対話型のセレクターを使ってAuth0アプリケーションを新規作成するか、統合したいプロジェクトを表す既存のアプリケーションを選択します。Auth0のすべてのアプリケーションには英数字からなる一意のクライアントIDが割り当てられており、アプリケーションのコードがSDKを通じてAuth0 APIを呼び出す際に使用されます。

このクイックスタートを使って構成されたすべての設定は、Dashboardのアプリケーションを自動更新します。今後、アプリケーションの管理もDashboardで行えます。

完了済みの構成を見てみたい場合は、サンプルアプリケーションをご覧ください。

Callback URLを構成する

Callback URLとは、Auth0がユーザーを認証後にリダイレクトするアプリケーション内URLです。設定されていない場合、ユーザーはログイン後にアプリケーションに戻りません。

サンプルプロジェクトに沿って進めている場合は、myapp://callbackに設定してください。

ログアウトURLを構成する

ログアウトURLとは、Auth0がユーザーをログアウト後にリダイレクトするアプリケーション内URLです。設定されていない場合、ユーザーはアプリケーションからログアウトできず、エラーを受け取ります。

サンプルプロジェクトに沿って進めている場合は、myapp://callbackに設定してください。

## Auth0 SDKをインストールする -

MAUIアプリケーションで、Auth0認証を手軽に実装できるように、Auth0はMAUIのSDKを提供しています。

NuGetパッケージ マネージャー([Tools(ツール)] -> [Library Package Manager(ライブラリーパッケージマネージャー)] -> [Package Manager Console(パッケージマネージャーコンソール)])を使ってAuth0.OidcClient.MAUIパッケージをインストールしてください。

NuGetパッケージマネージャーコンソール(Install-Package)やdotnet CLI(dotnet add)を代わりに使用することもできます。

Install-Package Auth0.OidcClient.MAUI
+

MAUIアプリケーションで、Auth0認証を手軽に実装できるように、Auth0はMAUIのSDKを提供しています。

NuGetパッケージ マネージャー([Tools(ツール)] -> [Library Package Manager(ライブラリーパッケージマネージャー)] -> [Package Manager Console(パッケージマネージャーコンソール)])を使ってAuth0.OidcClient.MAUIパッケージをインストールしてください。

NuGetパッケージマネージャーコンソール(Install-Package)やdotnet CLI(dotnet add)を代わりに使用することもできます。

Install-Package Auth0.OidcClient.MAUI
 
 
@@ -39,15 +39,15 @@ locale: ja-JP [IntentFilter(new[] { Intent.ActionView }, - Categories = new[] { Intent.CategoryDefault, Intent.CategoryBrowsable }, + Categories = new[] { Intent.CategoryDefault, Intent.CategoryBrowsable }, - DataScheme = CALLBACK_SCHEME)] + DataScheme = CALLBACK_SCHEME)] public class WebAuthenticatorActivity : Microsoft.Maui.Authentication.WebAuthenticatorCallbackActivity { - const string CALLBACK_SCHEME = "myapp"; + const string CALLBACK_SCHEME = "myapp"; } @@ -55,19 +55,19 @@ public class WebAuthenticatorActivity : Microsoft.Maui.Authentication.WebAuthent

上記のアクティビティは、ログイン後にAuth0がAndroidアプリケーションへリダイレクトで戻る時に、アプリケーションがmyapp://callback URLをハンドリングできることを保証します。

Windows

Auth0にリダイレクトで戻された後、アプリケーションが適切に再アクティブ化されるには、2つのことを行う必要があります:

  • 対応するプロトコルをPackage.appxmanifestに加えます。この場合、設定はmyappになっていますが、お好きなものに変更できます(関連するすべてのAuth0 URLも確実に更新してください)。

<Applications>
 
-  <Application Id="App" Executable="$targetnametoken$.exe" EntryPoint="$targetentrypoint$">
+ <Application Id="App" Executable="$targetnametoken$.exe" EntryPoint="$targetentrypoint$">
 
-    <Extensions>
+ <Extensions>
 
-      <uap:Extension Category="windows.protocol">
+ <uap:Extension Category="windows.protocol">
 
-        <uap:Protocol Name="myapp"/>
+ <uap:Protocol Name="myapp"/>
 
-      </uap:Extension>
+ </uap:Extension>
 
-    </Extensions>
+ </Extensions>
 
-  </Application>
+ </Application>
 
 </Applications>
 
@@ -77,13 +77,13 @@ public class WebAuthenticatorActivity : Microsoft.Maui.Authentication.WebAuthent
 
 {
 
-  if (Auth0.OidcClient.Platforms.Windows.Activator.Default.CheckRedirectionActivation())
+ if (Auth0.OidcClient.Platforms.Windows.Activator.Default.CheckRedirectionActivation())
 
-    return;
+ return;
 
 
 
-  this.InitializeComponent();
+ this.InitializeComponent();
 
 }
 
@@ -98,21 +98,19 @@ public class WebAuthenticatorActivity : Microsoft.Maui.Authentication.WebAuthent
 
 
 
-var client = new Auth0Client(new Auth0ClientOptions
+ var client = new Auth0Client(new Auth0ClientOptions {
 
-{
-
-    Domain = "${account.namespace}",
+ Domain = "${account.namespace}",
 
-    ClientId = "${account.clientId}",
+ ClientId = "${account.clientId}",
 
-    RedirectUri = "myapp://callback",
+ RedirectUri = "myapp://callback",
 
-    PostLogoutRedirectUri = "myapp://callback",
+ PostLogoutRedirectUri = "myapp://callback",
 
-    Scope = "openid profile email"
+ Scope = "openid profile email"
 
-});
+ });
 
 
@@ -120,7 +118,7 @@ var client = new Auth0Client(new Auth0ClientOptions
-

Sorry about that. Here are a couple things to double-check:

  • make sure the correct application is selected

  • did you save after entering your URLs?

  • make sure the domain and client ID are imported correctly

Still having issues? Check out our documentation or visit our community page to get more help.

+

すみません。いくつかの点をもう一度確認してください。

  • 正しいアプリケーションが選択されていることを確認します

  • URLを入力した後で保存しましたか?

  • ドメインとクライアントIDが正常にインポートされていることを確認します

まだお困りですか?当社提供のドキュメントまたはコミュニティページで詳しい情報を確認してください。

@@ -135,7 +133,7 @@ var client = new Auth0Client(new Auth0ClientOptions
-

Sorry about that. Here's something to double-check:

  • you called LoginAsync as expected

Still having issues? Check out our documentation or visit our community page to get more help.

+

すみません。以下の点をもう一度確認してください。

  • 期待されているようにLoginAsyncを呼び出した

まだお困りですか?当社提供のドキュメントまたはコミュニティページで詳しい情報を確認してください。

@@ -150,11 +148,11 @@ var client = new Auth0Client(new Auth0ClientOptions
-

Sorry about that. Here are a couple things to double-check:

  • you configured the correct Logout URL

  • you called LogoutAsync as expected.

Still having issues? Check out our documentation or visit our community page to get more help.

+

すみません。いくつかの点をもう一度確認してください。

  • 正しいログアウトURLが構成されている

  • 期待されているようにLogoutAsyncを呼び出した

まだお困りですか?当社提供のドキュメントまたはコミュニティページで詳しい情報を確認してください。

## ユーザープロファイル情報を表示する {{{ data-action="code" data-code="MainPage.xaml.cs#55:58" }}} -

ユーザーがログインやログアウトできるようになったら、認証済のユーザーに関連付けられたプロファイル情報を取得できるようにしたいと考えるはずです。たとえば、ログインしたユーザーの名前やプロフィール写真をプロジェクトに表示したいかもしれません。

MAUI用のAuth0 SDKでは、LoginResult.Userプロパティを通じてユーザー情報を提供します。

+

ユーザーがログインやログアウトできるようになったら、認証済のユーザーに関連付けられたプロファイル情報を取得できるようにしたいと考えるはずです。たとえば、ログインしたユーザーの名前やプロフィール写真をプロジェクトに表示したいかもしれません。

MAUI用のAuth0 SDKでは、LoginResult.Userプロパティを通じてユーザー情報を提供します。

diff --git a/ja-jp/articles/quickstart/native/net-android-ios/interactive.md b/ja-jp/articles/quickstart/native/net-android-ios/interactive.md index cb028d7b24..4fef804271 100644 --- a/ja-jp/articles/quickstart/native/net-android-ios/interactive.md +++ b/ja-jp/articles/quickstart/native/net-android-ios/interactive.md @@ -7,24 +7,24 @@ files: - files/AppDelegate - files/MyViewController github: - path: https://github.com/auth0-samples/auth0-xamarin-oidc-samples/tree/master/Quickstart/01-Login + path: Quickstart/01-Login locale: ja-JP --- # .NET AndroidまたはiOSアプリケーションにログインを追加する -

Auth0を使用すると、アプリケーションに手軽に認証を追加することができます。このガイドは、.NET AndroidまたはiOSアプリケーションにAndroidiOS用のAuth0 SDKを使ってAuth0を統合し、認証の追加とユーザープロファイル情報の表示を行う方法について説明します。

このクイックスタートは、Xamarin.AndroidXamarin.iOSの次世代である.NET AndroidとiOSについて説明します。現在、Xamarin.AndroidXamarin.iOSを使用している場合は、統合が同一でSDKにも互換性があるため、このガイドに従ってください。

このクイックスタートを使用するには、以下の手順に従います:

  • Auth0の無料アカウントにサインアップするか、Auth0にログインします。

  • 統合したいAndroidまたはiOSのプロジェクトで、.NET 6以降を使用したものを用意します。または、ログインした後に、サンプルアプリケーションを表示してダウンロードすることもできます。

+

Auth0を使用すると、アプリケーションに手軽に認証を追加することができます。このガイドは、.NET AndroidまたはiOSアプリケーションにAndroidiOS用のAuth0 SDKを使ってAuth0を統合し、認証の追加とユーザープロファイル情報の表示を行う方法について説明します。

このクイックスタートは、Xamarin.AndroidXamarin.iOSの次世代である.NET AndroidとiOSについて説明します。現在、Xamarin.AndroidXamarin.iOSを使用している場合は、統合が同一でSDKにも互換性があるため、このガイドに従ってください。

このクイックスタートを使用するには、以下の手順に従います:

  • Auth0の無料アカウントにサインアップするか、Auth0にログインします。

  • 統合したいAndroidまたはiOSのプロジェクトで、.NET 6以降を使用したものを用意します。または、ログインした後に、サンプルアプリケーションを表示してダウンロードすることもできます。

## Auth0を構成する -

Auth0のサービスを利用するには、Auth0 Dashboadに設定済みのアプリケーションがある必要があります。Auth0アプリケーションは、プロジェクトに対してどのように認証が動作して欲しいかを構成する場所です。

アプリケーションを構成する

対話型のセレクターを使って「ネイティブアプリケーション」を新規作成するか、統合したいプロジェクトを表す既存のアプリケーションを選択します。Auth0のすべてのアプリケーションには英数字からなる一意のクライアントIDが割り当てられており、アプリケーションのコードがSDKを通じてAuth0 APIを呼び出す際に使用されます。

このクイックスタートを使って構成されたすべての設定は、Dashboardのアプリケーションを自動更新します。今後、アプリケーションの管理もDashboardで行えます。

完了済みの構成を見てみたい場合は、サンプルアプリケーションをご覧ください。

Callback URLを構成する

Callback URLとは、Auth0がユーザーを認証後にリダイレクトするアプリケーション内URLです。設定されていない場合、ユーザーはログイン後にアプリケーションに戻りません。

サンプルプロジェクトに沿って進めている場合は、プラットフォームに応じて、これを次のURLの1つに設定します:

  • AndroidYOUR_PACKAGE_NAME://{yourDomain}/android/YOUR_PACKAGE_NAME/callback

  • iOSYOUR_BUNDLE_ID://{yourDomain}/ios/YOUR_BUNDLE_ID/callback

ログアウトURLを構成する

ログアウトURLとは、Auth0がユーザーをログアウト後にリダイレクトするアプリケーション内URLです。設定されていない場合、ユーザーはアプリケーションからログアウトできず、エラーを受け取ります。

サンプルプロジェクトに沿って進めている場合は、プラットフォームに応じて、これを次のURLの1つに設定します:

  • AndroidYOUR_PACKAGE_NAME://{yourDomain}/android/YOUR_PACKAGE_NAME/callback

  • iOSYOUR_BUNDLE_ID://{yourDomain}/ios/YOUR_BUNDLE_ID/callback

最後に、アプリケーションの[Application Type(アプリケーションタイプ)][Native(ネイティブ)]になっていることをアプリケーションの設定で必ず確認してください。

+

Auth0のサービスを利用するには、Auth0 Dashboadに設定済みのアプリケーションがある必要があります。Auth0アプリケーションは、プロジェクトに対してどのように認証が動作して欲しいかを構成する場所です。

アプリケーションを構成する

対話型のセレクターを使って「ネイティブアプリケーション」を新規作成するか、統合したいプロジェクトを表す既存のアプリケーションを選択します。Auth0のすべてのアプリケーションには英数字からなる一意のクライアントIDが割り当てられており、アプリケーションのコードがSDKを通じてAuth0 APIを呼び出す際に使用されます。

このクイックスタートを使って構成されたすべての設定は、Dashboardのアプリケーションを自動更新します。今後、アプリケーションの管理もDashboardで行えます。

完了済みの構成を見てみたい場合は、サンプルアプリケーションをご覧ください。

Callback URLを構成する

Callback URLとは、Auth0がユーザーを認証後にリダイレクトするアプリケーション内URLです。設定されていない場合、ユーザーはログイン後にアプリケーションに戻りません。

サンプルプロジェクトに沿って進めている場合は、プラットフォームに応じて、これを次のURLの1つに設定します:

  • AndroidYOUR_PACKAGE_NAME://{yourDomain}/android/YOUR_PACKAGE_NAME/callback

  • iOSYOUR_BUNDLE_ID://{yourDomain}/ios/YOUR_BUNDLE_ID/callback

ログアウトURLを構成する

ログアウトURLとは、Auth0がユーザーをログアウト後にリダイレクトするアプリケーション内URLです。設定されていない場合、ユーザーはアプリケーションからログアウトできず、エラーを受け取ります。

サンプルプロジェクトに沿って進めている場合は、プラットフォームに応じて、これを次のURLの1つに設定します:

  • AndroidYOUR_PACKAGE_NAME://{yourDomain}/android/YOUR_PACKAGE_NAME/callback

  • iOSYOUR_BUNDLE_ID://{yourDomain}/ios/YOUR_BUNDLE_ID/callback

最後に、アプリケーションの[Application Type(アプリケーションタイプ)][Native(ネイティブ)]になっていることをアプリケーションの設定で必ず確認してください。

## Auth0 SDKをインストールする -

.NET AndroidとiOSアプリケーションで、Auth0認証が手軽に実装できるように、Auth0はAndroidiOSのSDKを提供しています。

NuGetパッケージマネージャ([Tools(ツール)] -> [Library Package Manager(ライブラリーパッケージマネージャー)] -> [Package Manager Console(パッケージマネージャーコンソール)])を使用して、AndroidまたはiOSアプリケーションのどちらをビルドするかに応じて、Auth0.OidcClient.AndroidXまたはAuth0.OidcClient.iOSパッケージをインストールします。

NuGetパッケージマネージャーコンソール(Install-Package)やdotnet CLI(dotnet add)を代わりに使用することもできます。

Install-Package Auth0.OidcClient.AndroidX
+

.NET AndroidとiOSアプリケーションで、Auth0認証が手軽に実装できるように、Auth0はAndroidiOSのSDKを提供しています。

NuGetパッケージマネージャ([Tools(ツール)] -> [Library Package Manager(ライブラリーパッケージマネージャー)] -> [Package Manager Console(パッケージマネージャーコンソール)])を使用して、AndroidまたはiOSアプリケーションのどちらをビルドするかに応じて、Auth0.OidcClient.AndroidXまたはAuth0.OidcClient.iOSパッケージをインストールします。

NuGetパッケージマネージャーコンソール(Install-Package)やdotnet CLI(dotnet add)を代わりに使用することもできます。

Install-Package Auth0.OidcClient.AndroidX
 
 Install-Package Auth0.OidcClient.iOS
 
@@ -59,7 +59,7 @@ var client = new Auth0Client(new Auth0ClientOptions {
 
   
-

Sorry about that. Here are a couple things to double-check:

  • make sure the correct application is selected

  • did you save after entering your URLs?

  • make sure the domain and client ID are imported correctly

Still having issues? Check out our documentation or visit our community page to get more help.

+

すみません。いくつかの点をもう一度確認してください。

  • 正しいアプリケーションが選択されていることを確認します

  • URLを入力した後で保存しましたか?

  • ドメインとクライアントIDが正常にインポートされていることを確認します

まだお困りですか?当社提供のドキュメントまたはコミュニティページで詳しい情報を確認してください。

@@ -124,7 +124,7 @@ var client = new Auth0Client(new Auth0ClientOptions {
-

Sorry about that. Here's something to double-check:

  • you called LoginAsync as expected

Still having issues? Check out our documentation or visit our community page to get more help.

+

すみません。以下の点をもう一度確認してください。

  • 期待されているようにLoginAsyncを呼び出した

まだお困りですか?当社提供のドキュメントまたはコミュニティページで詳しい情報を確認してください。

@@ -139,7 +139,7 @@ var client = new Auth0Client(new Auth0ClientOptions {
-

Sorry about that. Here are a couple things to double-check:

  • you configured the correct Logout URL

  • you called LogoutAsync as expected.

Still having issues? Check out our documentation or visit our community page to get more help.

+

すみません。いくつかの点をもう一度確認してください。

  • 正しいログアウトURLが構成されている

  • 期待されているようにLogoutAsyncを呼び出した

まだお困りですか?当社提供のドキュメントまたはコミュニティページで詳しい情報を確認してください。

diff --git a/ja-jp/articles/quickstart/native/react-native-expo/interactive.md b/ja-jp/articles/quickstart/native/react-native-expo/interactive.md index b2ab554caa..d124b350be 100644 --- a/ja-jp/articles/quickstart/native/react-native-expo/interactive.md +++ b/ja-jp/articles/quickstart/native/react-native-expo/interactive.md @@ -6,7 +6,7 @@ files: - files/App - files/app github: - path: https://github.com/auth0-samples/auth0-react-native-sample/tree/master/00-Login + path: 00-Login locale: ja-JP --- @@ -18,22 +18,22 @@ locale: ja-JP ## Auth0を構成する -

Auth0のサービスを利用するには、Auth0 Dashboadに設定済みのアプリケーションがある必要があります。Auth0アプリケーションは、プロジェクトに認証を構成する場所です。

アプリケーションを構成する

対話型のセレクターを使ってAuth0アプリケーションを新規作成するか、統合したいプロジェクトを表す既存のアプリケーションを選択します。Auth0のすべてのアプリケーションには英数字からなる一意のクライアントIDが割り当てられており、アプリケーションのコードがSDKを通じてAuth0 APIを呼び出す際に使用されます。

このクイックスタートを使って構成されたすべての設定は、Dashboardのアプリケーションを自動更新します。今後、アプリケーションの管理もDashboardで行えます。

完了済みの構成を見てみたい場合は、サンプルアプリケーションをご覧ください。

Callback URLとログアウトURLを構成する

Auth0はCallback URLとログアウトURLを呼び出して、ユーザーをアプリケーションにリダイレクトで戻します。Auth0は、ユーザーを認証した後にCallback URLを呼び出し、セッションのクッキーを削除した後にログアウトURLを呼び出します。Callback URLとログアウトURLを設定しないと、ユーザーはアプリにログインやログアウトが行えなくなり、アプリケーションにエラーが発生します。

アプリのプラットフォームに合わせて、対応するURLをCallback URLログアウトURLに追加します。カスタムドメインを使っている場合は、Auth0テナントのドメインではなく、カスタムドメインの値を使用してください。

iOS

BUNDLE_IDENTIFIER.auth0://{yourDomain}/ios/BUNDLE_IDENTIFIER/callback

Android

PACKAGE_NAME.auth0://{yourDomain}/android/PACKAGE_NAME/callback

サンプルプロジェクトに沿って進めている場合には、次の値を使用します:

  • iOS:com.auth0samples.auth0://{yourDomain}/ios/com.auth0samples/callback

  • Android:com.auth0samples.auth0://{yourDomain}/android/com.auth0samples/callback

+

Auth0のサービスを利用するには、Auth0 Dashboadに設定済みのアプリケーションがある必要があります。Auth0アプリケーションは、プロジェクトに認証を構成する場所です。

アプリケーションを構成する

対話型のセレクターを使ってAuth0アプリケーションを新規作成するか、統合したいプロジェクトを表す既存のアプリケーションを選択します。Auth0のすべてのアプリケーションには英数字からなる一意のクライアントIDが割り当てられており、アプリケーションのコードがSDKを通じてAuth0 APIを呼び出す際に使用されます。

このクイックスタートを使って構成されたすべての設定は、Dashboardのアプリケーションを自動更新します。今後、アプリケーションの管理もDashboardで行えます。

完了済みの構成を見てみたい場合は、サンプルアプリケーションをご覧ください。

Callback URLとログアウトURLを構成する

Auth0はCallback URLとログアウトURLを呼び出して、ユーザーをアプリケーションにリダイレクトで戻します。Auth0は、ユーザーを認証した後にCallback URLを呼び出し、セッションのクッキーを削除した後にログアウトURLを呼び出します。Callback URLとログアウトURLを設定しないと、ユーザーはアプリにログインやログアウトが行えなくなり、アプリケーションにエラーが発生します。

アプリのプラットフォームに合わせて、対応するURLをCallback URLログアウトURLに追加します。カスタムドメインを使っている場合は、Auth0テナントのドメインではなく、カスタムドメインの値を使用してください。

iOS

BUNDLE_IDENTIFIER.auth0://{yourDomain}/ios/BUNDLE_IDENTIFIER/callback

Android

PACKAGE_NAME.auth0://{yourDomain}/android/PACKAGE_NAME/callback

サンプルプロジェクトに沿って進めている場合には、次の値を使用します:

  • iOS:com.auth0samples.auth0://{yourDomain}/ios/com.auth0samples/callback

  • Android:com.auth0samples.auth0://{yourDomain}/android/com.auth0samples/callback

## 依存関係をインストールする -

このセクションでは、React Native Auth0モジュールをインストールする方法について説明します。

React Nativeの追加情報については、公式ドキュメントを参照してください。

Yarn

yarn add react-native-auth0

yarnの詳細については、公式ドキュメントを確認してください。

npm

npm install react-native-auth0 --save

+

このセクションでは、React Native Auth0モジュールをインストールする方法について説明します。

React Nativeの追加情報については、公式ドキュメントを参照してください。

Yarn

yarn add react-native-auth0

yarnの詳細については、公式ドキュメントを確認してください。

npm

npm install react-native-auth0 --save

## Auth0構成プラグインをセットアップする {{{ data-action="code" data-code="app.json#10:15" }}} -

Auth0パッケージはカスタムネイティブコードを実行し、これはビルド時に構成しておく必要があります。これを実現するには、Expo構成プラグインを使用します。

react-native-auth0プラグインがExpo構成に追加されます。

+

Auth0パッケージはカスタムネイティブコードを実行し、これはビルド時に構成しておく必要があります。これを実現するには、Expo構成プラグインを使用します。

react-native-auth0プラグインがExpo構成に追加されます。

## ネイティブソースコードを生成する {{{ data-action="code" data-code="app.json#31:36" }}} -

上記の構成を設定するには、ネイティブコードを生成する必要があります。これを行うには、次のコマンドを実行します:

expo prebuild

Expoの構成に存在しない場合には、AndroidパッケージiOSバンドル識別子の提供が促されます。

? What would you like your Android package name to be? > com.auth0samples # or your desired package name
+

上記の構成を設定するには、ネイティブコードを生成する必要があります。これを行うには、次のコマンドを実行します:

expo prebuild

Expoの構成に存在しない場合には、AndroidパッケージiOSバンドル識別子の提供が促されます。

? What would you like your Android package name to be? > com.auth0samples # or your desired package name
 
 
 
@@ -54,7 +54,7 @@ locale: ja-JP
 
   
-

If your application did not launch successfully:

  • make sure the correct application is selected

  • did you save after entering your URLs?

  • ensure your domain and client ID values are correct

Still having issues? Check out our documentation or visit our community page to get more help.

+

アプリケーションが正常に起動しなかった場合は以下を行います。

  • 正しいアプリケーションが選択されていることを確認します

  • URLを入力した後で保存しましたか?

  • ドメインとクライアントIDの値が正しいことを確認します

まだお困りですか?当社提供のドキュメントまたはコミュニティページで詳しい情報を確認してください。

@@ -65,7 +65,7 @@ locale: ja-JP
-

If your application did not launch successfully:

  • ensure you set the Allowed Callback URLs are correct

  • verify you saved your changes after entering your URLs

  • make sure the domain and client ID values are imported correctly

  • if using Android, ensure that the manifest placeholders have been set up correctly, otherwise the redirect back to your app may not work

Still having issues? Check out our documentation or visit our community page to get more help.

+

アプリケーションが正常に起動しなかった場合は以下を行います。

  • 設定した[Allowed Callback URLs(許可されているCallback URL)]が正しいことを確認します

  • URLを入力した後で保存したことを確認します

  • ドメインとクライアントIDの値が正常にインポートされていることを確認します

  • Androidを使用している場合は、アプリに正しくリダイレクトで戻されるように、マニフェストのプレースホルダーが正しくセットアップされていることを確認します

まだお困りですか?当社提供のドキュメントまたはコミュニティページで詳しい情報を確認してください。

@@ -76,14 +76,14 @@ locale: ja-JP
-

If your application did not log out successfully:

  • ensure the Allowed Logout URLs are set properly

  • verify you saved your changes after entering your URLs

Still having issues? Check out our documentation or visit our community page to get more help.

+

アプリケーションが正常にログアウトしなかった場合は以下を行います。

  • [Allowed Logout URLs(許可されているログアウトURL)]が正しく設定されていることを確認します

  • URLを入力した後で保存したことを確認します

まだお困りですか?当社提供のドキュメントまたはコミュニティページで詳しい情報を確認してください。

## ユーザープロファイル情報を表示する {{{ data-action="code" data-code="App.js#32:34" }}} -

useAuth0フックは、認証済みユーザーの情報を含むuserオブジェクトを公開します。これを使用すれば、認証済みユーザーについてデコードされたユーザープロファイル情報に、IDトークンからアクセスできます。

ユーザーが認証されていない場合、このプロパティはnullになります。

Expo - 手順8 - ユーザープロファイル情報を表示する

ログインして、結果のuserプロパティを調査します。emailnameなど、現在のユーザーのプロファイル情報を確認します。

+

useAuth0フックは、認証済みユーザーの情報を含むuserオブジェクトを公開します。これを使用すれば、認証済みユーザーについてデコードされたユーザープロファイル情報に、IDトークンからアクセスできます。

ユーザーが認証されていない場合、このプロパティはnullになります。

Expo - 手順8 - ユーザープロファイル情報を表示する

ログインして、結果のuserプロパティを調査します。emailnameなど、現在のユーザーのプロファイル情報を確認します。

diff --git a/ja-jp/articles/quickstart/native/react-native/interactive.md b/ja-jp/articles/quickstart/native/react-native/interactive.md index b321bf892d..dc4cfa3e7f 100644 --- a/ja-jp/articles/quickstart/native/react-native/interactive.md +++ b/ja-jp/articles/quickstart/native/react-native/interactive.md @@ -5,19 +5,19 @@ interactive: true files: - files/app github: - path: https://github.com/auth0-samples/auth0-react-native-sample/tree/master/00-Login + path: 00-Login locale: ja-JP --- # React Nativeアプリケーションにログインを追加する -

このクイックスタートは、React Nativeフレームワーク用です。ExpoアプリケーションにAuth0を統合するには、「Expoクイックスタート」参照してください。

+

このクイックスタートは、React Nativeフレームワーク用です。ExpoアプリケーションにAuth0を統合するには、「Expoクイックスタート」参照してください。

## Auth0を構成する -

Auth0のサービスを利用するには、Auth0 Dashboadに設定済みのアプリケーションがある必要があります。Auth0アプリケーションは、プロジェクトに認証を構成する場所です。

アプリケーションを構成する

対話型のセレクターを使ってAuth0アプリケーションを新規作成するか、統合したいプロジェクトを表す既存のアプリケーションを選択します。Auth0のすべてのアプリケーションには英数字からなる一意のクライアントIDが割り当てられており、アプリケーションのコードがSDKを通じてAuth0 APIを呼び出す際に使用されます。

このクイックスタートを使って構成されたすべての設定は、Dashboardのアプリケーションを自動更新します。今後、アプリケーションの管理もDashboardで行えます。

完成した構成を詳しく見るには、Dashboardのサンプルアプリケーションをご覧ください。

Callback URLとログアウトURLを構成する

Auth0はCallback URLとログアウトURLを呼び出して、ユーザーをアプリケーションにリダイレクトで戻します。Auth0は、ユーザーを認証した後にCallback URLを呼び出し、セッションのクッキーを削除した後にログアウトURLを呼び出します。Callback URLとログアウトURLを設定しないと、ユーザーはアプリにログインやログアウトが行えなくなり、アプリケーションにエラーが発生します。

アプリのプラットフォームに合わせて、対応するURLをCallback URLログアウトURLに追加します。カスタムドメインを使っている場合は、Auth0テナントのドメインではなく、カスタムドメインの値を使用してください。

iOS

BUNDLE_IDENTIFIER.auth0://${account.namespace}/ios/BUNDLE_IDENTIFIER/callback
+

Auth0のサービスを利用するには、Auth0 Dashboadに設定済みのアプリケーションがある必要があります。Auth0アプリケーションは、プロジェクトに認証を構成する場所です。

アプリケーションを構成する

対話型のセレクターを使ってAuth0アプリケーションを新規作成するか、統合したいプロジェクトを表す既存のアプリケーションを選択します。Auth0のすべてのアプリケーションには英数字からなる一意のクライアントIDが割り当てられており、アプリケーションのコードがSDKを通じてAuth0 APIを呼び出す際に使用されます。

このクイックスタートを使って構成されたすべての設定は、Dashboardのアプリケーションを自動更新します。今後、アプリケーションの管理もDashboardで行えます。

完成した構成を詳しく見るには、Dashboardのサンプルアプリケーションをご覧ください。

Callback URLとログアウトURLを構成する

Auth0はCallback URLとログアウトURLを呼び出して、ユーザーをアプリケーションにリダイレクトで戻します。Auth0は、ユーザーを認証した後にCallback URLを呼び出し、セッションのクッキーを削除した後にログアウトURLを呼び出します。Callback URLとログアウトURLを設定しないと、ユーザーはアプリにログインやログアウトが行えなくなり、アプリケーションにエラーが発生します。

アプリのプラットフォームに合わせて、対応するURLをCallback URLログアウトURLに追加します。カスタムドメインを使っている場合は、Auth0テナントのドメインではなく、カスタムドメインの値を使用してください。

iOS

BUNDLE_IDENTIFIER.auth0://${account.namespace}/ios/BUNDLE_IDENTIFIER/callback
 
 
@@ -30,11 +30,11 @@ locale: ja-JP ## 依存関係をインストールする -

このセクションでは、React Native Auth0モジュールをインストールします。

React Nativeの追加情報については公式ドキュメントをご覧ください。

Yarn

yarn add react-native-auth0
+

このセクションでは、React Native Auth0モジュールをインストールします。

React Nativeの追加情報については公式ドキュメントをご覧ください。

Yarn

yarn add react-native-auth0
 
 
-

Yarnの詳細については、公式ドキュメントをご覧ください。

npm

npm install react-native-auth0 --save
+

Yarnの詳細については、公式ドキュメントをご覧ください。

npm

npm install react-native-auth0 --save
 
 
@@ -85,7 +85,7 @@ pod install
-

このファイルは、古いアーキテクチャを使ったアプリケーションのios/<YOUR PROJECT>/AppDelegate.mになります。

次に、アプリのバンドルIDを使ってURLSchemeを追加します。

iosフォルダーでInfo.plistを開き、CFBundleIdentifierの値を見つけます。

<key>CFBundleIdentifier</key>
+

このファイルは、古いアーキテクチャを使ったアプリケーションのios/<YOUR PROJECT>/AppDelegate.mになります。

次に、アプリのバンドルIDを使ってURLSchemeを追加します。

iosフォルダーでInfo.plistを開き、CFBundleIdentifierの値を見つけます。

<key>CFBundleIdentifier</key>
 
 <string>$(PRODUCT_BUNDLE_IDENTIFIER)</string>
 
@@ -119,7 +119,7 @@ pod install
 
 
-

アプリケーションがReact Native CLIで生成された場合、$(PRODUCT_BUNDLE_IDENTIFIER)のデフォルト値はorg.reactjs.native.example.$(PRODUCT_NAME:rfc1034identifier)と動的に一致します。サンプルアプリの場合、この値はcom.auth0samplesと一致します。

この値は、この後の手順で、Callback URLを定義するために使用します。以下の手順で、XCodeを用いて変更できます:

  • アプリのルートからターミナルでios/<YOUR PROJECT>.xcodeprojファイルを開くか、xed iosを実行する。

  • プロジェクトまたは希望ターゲットの[Build Settings(ビルド設定)]タブを開いて「Bundle Identifier」を含むセクションを見つける。

  • 「Bundle Identifier」値を希望のアプリケーションのバンドルID名と置き換える。

詳細情報はReact Nativeドキュメントをご覧ください。

+

アプリケーションがReact Native CLIで生成された場合、$(PRODUCT_BUNDLE_IDENTIFIER)のデフォルト値はorg.reactjs.native.example.$(PRODUCT_NAME:rfc1034identifier)と動的に一致します。サンプルアプリの場合、この値はcom.auth0samplesと一致します。

この値は、この後の手順で、Callback URLを定義するために使用します。以下の手順で、XCodeを用いて変更できます:

  • アプリのルートからターミナルでios/<YOUR PROJECT>.xcodeprojファイルを開くか、xed iosを実行する。

  • プロジェクトまたは希望ターゲットの[Build Settings(ビルド設定)]タブを開いて「Bundle Identifier」を含むセクションを見つける。

  • 「Bundle Identifier」値を希望のアプリケーションのバンドルID名と置き換える。

詳細情報はReact Nativeドキュメントをご覧ください。

## Auth0Providerコンポーネントを構成する {{{ data-action="code" data-code="app.js#46:48" }}} @@ -132,9 +132,7 @@ pod install
-

- -If your application did not launch successfully:

  • make sure the correct application is selected

  • did you save after entering your URLs?

  • ensure your domain and client ID values are correct

Still having issues? Check out our documentation or visit our community page to get more help.

+

アプリケーションが正常に起動しなかった場合は以下を行います。

  • 正しいアプリケーションが選択されていることを確認します

  • URLを入力した後で保存しましたか?

  • ドメインとクライアントIDの値が正しいことを確認します

まだお困りですか?当社提供のドキュメントまたはコミュニティページで詳しい情報を確認してください。

@@ -145,7 +143,7 @@ If your application did not launch successfully:

  • make sure the cor

    -

    If your application did not launch successfully:

    • Ensure you set the Allowed Callback URLs are correct

    • Verify you saved your changes after entering your URLs

    • Make sure the domain and client ID values are imported correctly

    • If using Android, ensure you set up the manifest placeholders correctly, otherwise the redirect back to your app may not work

    Still having issues? Check out our documentation or visit our community page to get more help.

    +

    アプリケーションが正常に起動しなかった場合は以下を行います。

    • 設定した[Allowed Callback URLs(許可されているCallback URL)]が正しいことを確認します

    • URLを入力した後で保存したことを確認します

    • ドメインとクライアントIDの値が正常にインポートされていることを確認します

    • Androidを使用している場合は、アプリに正しくリダイレクトで戻されるように、マニフェストのプレースホルダーが正しくセットアップされていることを確認します

    まだお困りですか?当社提供のドキュメントまたはコミュニティページで詳しい情報を確認してください。

@@ -156,7 +154,7 @@ If your application did not launch successfully:

  • make sure the cor

    -

    If your application did not log out successfully:

    • Ensure the Allowed Logout URLs are set properly

    • Verify you saved your changes after entering your URLs

    Still having issues? Check out our documentation or visit our community page to get more help.

    +

    アプリケーションが正常にログアウトしなかった場合は以下を行います。

    • [Allowed Logout URLs(許可されているログアウトURL)]が正しく設定されていることを確認します

    • URLを入力した後で保存したことを確認します

    まだお困りですか?当社提供のドキュメントまたはコミュニティページで詳しい情報を確認してください。

diff --git a/ja-jp/articles/quickstart/native/windows-uwp-csharp/interactive.md b/ja-jp/articles/quickstart/native/windows-uwp-csharp/interactive.md index a6dd650e69..de5a092317 100644 --- a/ja-jp/articles/quickstart/native/windows-uwp-csharp/interactive.md +++ b/ja-jp/articles/quickstart/native/windows-uwp-csharp/interactive.md @@ -5,7 +5,7 @@ interactive: true files: - files/MainPage.xaml github: - path: https://github.com/auth0-samples/auth0-uwp-oidc-samples/tree/master/Quickstart/00-Starter-Seed + path: Quickstart/00-Starter-Seed locale: ja-JP --- diff --git a/ja-jp/articles/quickstart/native/wpf-winforms/interactive.md b/ja-jp/articles/quickstart/native/wpf-winforms/interactive.md index 1620e8ad02..324ba2f868 100644 --- a/ja-jp/articles/quickstart/native/wpf-winforms/interactive.md +++ b/ja-jp/articles/quickstart/native/wpf-winforms/interactive.md @@ -5,24 +5,24 @@ interactive: true files: - files/MainWindow.xaml github: - path: https://github.com/auth0-samples/auth0-WinFormsWPF-oidc-samples/tree/master/Quickstart/00-Starter-Seed + path: Quickstart/00-Starter-Seed locale: ja-JP --- # WPFまたはWinFormsアプリケーションにログインを追加する -

Auth0を使用すると、アプリケーションに手軽に認証を追加することができます。このガイドは、WPFやWinFormsアプリケーションにWPFまたはWinForms用のAuth0 SDKを使ってAuth0を統合し、認証の追加とユーザープロファイル情報の表示を行う方法について説明します。

このクイックスタートを使用するには、以下の手順に従います:

  • Auth0の無料アカウントにサインアップするか、Auth0にログインします。

  • 統合したいWPFまたはWinFormsプロジェクトを用意します。または、ログインした後に、サンプルアプリケーションを表示してダウンロードすることもできます。

+

Auth0を使用すると、アプリケーションに手軽に認証を追加することができます。このガイドは、WPFやWinFormsアプリケーションにWPFまたはWinForms用のAuth0 SDKを使ってAuth0を統合し、認証の追加とユーザープロファイル情報の表示を行う方法について説明します。

このクイックスタートを使用するには、以下の手順に従います:

  • Auth0の無料アカウントにサインアップするか、Auth0にログインします。

  • 統合したいWPFまたはWinFormsプロジェクトを用意します。または、ログインした後に、サンプルアプリケーションを表示してダウンロードすることもできます。

## Auth0を構成する -

Auth0のサービスを利用するには、Auth0 Dashboadに設定済みのアプリケーションがある必要があります。Auth0アプリケーションは、開発中のプロジェクトに対してどのように認証が動作して欲しいかを構成する場所です。

アプリケーションを構成する

対話型のセレクターを使ってAuth0アプリケーションを新規作成するか、統合したいプロジェクトを表す既存のアプリケーションを選択します。Auth0のすべてのアプリケーションには英数字からなる一意のクライアントIDが割り当てられており、アプリケーションのコードがSDKを通じてAuth0 APIを呼び出す際に使用されます。

このクイックスタートを使って構成されたすべての設定は、Dashboardのアプリケーションを自動更新します。今後、アプリケーションの管理もDashboardで行えます。

完了済みの構成を見てみたい場合は、サンプルアプリケーションをご覧ください。

Callback URLを構成する

Callback URLとは、Auth0がユーザーを認証後にリダイレクトするアプリケーション内URLです。設定されていない場合、ユーザーはログイン後にアプリケーションに戻りません。

サンプルプロジェクトに沿って進めている場合は、http://{yourDomain}:4200/mobileに設定してください。

ログアウトURLを構成する

ログアウトURLとは、Auth0がユーザーをログアウト後にリダイレクトするアプリケーション内URLです。設定されていない場合、ユーザーはアプリケーションからログアウトできず、エラーを受け取ります。

サンプルプロジェクトに沿って進めている場合は、http://{yourDomain}:4200/mobileに設定してください。

+

Auth0のサービスを利用するには、Auth0 Dashboadに設定済みのアプリケーションがある必要があります。Auth0アプリケーションは、開発中のプロジェクトに対してどのように認証が動作して欲しいかを構成する場所です。

アプリケーションを構成する

対話型のセレクターを使ってAuth0アプリケーションを新規作成するか、統合したいプロジェクトを表す既存のアプリケーションを選択します。Auth0のすべてのアプリケーションには英数字からなる一意のクライアントIDが割り当てられており、アプリケーションのコードがSDKを通じてAuth0 APIを呼び出す際に使用されます。

このクイックスタートを使って構成されたすべての設定は、Dashboardのアプリケーションを自動更新します。今後、アプリケーションの管理もDashboardで行えます。

完了済みの構成を見てみたい場合は、サンプルアプリケーションをご覧ください。

Callback URLを構成する

Callback URLとは、Auth0がユーザーを認証後にリダイレクトするアプリケーション内URLです。設定されていない場合、ユーザーはログイン後にアプリケーションに戻りません。

サンプルプロジェクトに沿って進めている場合は、http://{yourDomain}:4200/mobileに設定してください。

ログアウトURLを構成する

ログアウトURLとは、Auth0がユーザーをログアウト後にリダイレクトするアプリケーション内URLです。設定されていない場合、ユーザーはアプリケーションからログアウトできず、エラーを受け取ります。

サンプルプロジェクトに沿って進めている場合は、http://{yourDomain}:4200/mobileに設定してください。

## Auth0 SDKをインストールする -

WPFおよびWinFormsアプリケーションで、Auth0認証が手軽に実装できるように、Auth0はWPFWinFormsのSDKを提供しています。

NuGetパッケージマネージャー([Tools(ツール)] -> [Library Package Manager(ライブラリーパッケージマネージャー)] -> [Package Manager Console(パッケージマネージャーコンソール)]) を使用して、WPFまたはWindows Formsアプリケーションのどちらをビルドするかに応じて、Auth0.OidcClient.WPFまたはAuth0.OidcClient.WinFormsパッケージをインストールします。

NuGetパッケージマネージャーコンソール(Install-Package)やdotnet CLI(dotnet add)を代わりに使用することもできます。

Install-Package Auth0.OidcClient.WPF
+

WPFおよびWinFormsアプリケーションで、Auth0認証が手軽に実装できるように、Auth0はWPFWinFormsのSDKを提供しています。

NuGetパッケージマネージャー([Tools(ツール)] -> [Library Package Manager(ライブラリーパッケージマネージャー)] -> [Package Manager Console(パッケージマネージャーコンソール)]) を使用して、WPFまたはWindows Formsアプリケーションのどちらをビルドするかに応じて、Auth0.OidcClient.WPFまたはAuth0.OidcClient.WinFormsパッケージをインストールします。

NuGetパッケージマネージャーコンソール(Install-Package)やdotnet CLI(dotnet add)を代わりに使用することもできます。

Install-Package Auth0.OidcClient.WPF
 
 Install-Package Auth0.OidcClient.WinForms
 
@@ -39,11 +39,11 @@ dotnet add Auth0.OidcClient.WinForms
 ## Auth0Clientをインスタンス化する {{{ data-action="code" data-code="MainWindow.xaml.cs#13:22" }}}
 
 
-

Auth0をアプリケーションに統合するには、Auth0ドメインとクライアントIDを含むAuth0ClientOptionsのインスタンスを渡して、Auth0Clientクラスをインスタンス化します。

SDKは初期設定で、.NET6以降にはWebView2を利用し、.NET6より前のバージョンを使用するアプリケーションは古いWebViewに依存します。

WPF/WinFormsクイックスタート - 手順3「チェックポイント」

Auth0Clientが適切にインスタンス化されました。アプリケーションを実行して次の点を確認します:

  • Auth0Clientが正しくインスタンス化されている。

  • アプリケーションがAuth0に関連したエラーを投入していない。

+

Auth0をアプリケーションに統合するには、Auth0ドメインとクライアントIDを含むAuth0ClientOptionsのインスタンスを渡して、Auth0Clientクラスをインスタンス化します。

SDKは初期設定で、.NET6以降にはWebView2を利用し、.NET6より前のバージョンを使用するアプリケーションは古いWebViewに依存します。

WPF/WinFormsクイックスタート - 手順3「チェックポイント」

Auth0Clientが適切にインスタンス化されました。アプリケーションを実行して次の点を確認します:

  • Auth0Clientが正しくインスタンス化されている。

  • アプリケーションがAuth0に関連したエラーを投入していない。

-

Sorry about that. Here are a couple things to double-check:

  • make sure the correct application is selected

  • did you save after entering your URLs?

  • make sure the domain and client ID are imported correctly

Still having issues? Check out our documentation or visit our community page to get more help.

+

すみません。いくつかの点をもう一度確認してください。

  • 正しいアプリケーションが選択されていることを確認します

  • URLを入力した後で保存しましたか?

  • ドメインとクライアントIDが正常にインポートされていることを確認します

まだお困りですか?当社提供のドキュメントまたはコミュニティページで詳しい情報を確認してください。

@@ -54,7 +54,7 @@ dotnet add Auth0.OidcClient.WinForms
-

Sorry about that. Here's something to double-check:

  • you called LoginAsync as expected

Still having issues? Check out our documentation or visit our community page to get more help.

+

すみません。以下の点をもう一度確認してください。

  • 期待されているようにLoginAsyncを呼び出した

まだお困りですか?当社提供のドキュメントまたはコミュニティページで詳しい情報を確認してください。

@@ -65,7 +65,7 @@ dotnet add Auth0.OidcClient.WinForms
-

Sorry about that. Here are a couple things to double-check:

  • you configured the correct Logout URL

  • you called LogoutAsync as expected.

Still having issues? Check out our documentation or visit our community page to get more help.

+

すみません。いくつかの点をもう一度確認してください。

  • 正しいログアウトURLが構成されている

  • 期待されているようにLogoutAsyncを呼び出した

まだお困りですか?当社提供のドキュメントまたはコミュニティページで詳しい情報を確認してください。

@@ -76,6 +76,6 @@ dotnet add Auth0.OidcClient.WinForms
-

Sorry about that. Here are a couple things to double-check:

  • the LoginResult.IsError is false

  • if the LoginResult.IsError isn't false, be sure to check LoginResult.Error for details.

Still having issues? Check out our documentation or visit our community page to get more help.

+

すみません。いくつかの点をもう一度確認してください。

  • LoginResult.IsErrorがfalseに設定されている

  • LoginResult.IsErrorがfalseに設定されていない場合は、必ずLoginResult.Errorで詳細を確認します。

まだお困りですか?当社提供のドキュメントまたはコミュニティページで詳しい情報を確認してください。

diff --git a/ja-jp/articles/quickstart/spa/angular/interactive.md b/ja-jp/articles/quickstart/spa/angular/interactive.md index afef86ca0c..6d191a88e9 100644 --- a/ja-jp/articles/quickstart/spa/angular/interactive.md +++ b/ja-jp/articles/quickstart/spa/angular/interactive.md @@ -8,59 +8,59 @@ files: - files/logout-button - files/user-profile github: - path: https://github.com/auth0-samples/auth0-angular-samples/tree/main/Sample-01 + path: Sample-01 locale: ja-JP --- # Angularアプリケーションにログインを追加する -

Angularでユーザー認証を実装するための詳しい情報については、「例を挙げて説明するAngular認証ガイド」を参照してください。このガイドでは、サインアップボタンを作成する方法、ルートガードを追加する方法、そして保護されたAPIをAngularから呼び出す方法が詳しく説明されています。

Auth0を使用すると、アプリケーションに手軽に認証を追加することができます。このガイドは、AngularアプリケーションにAuth0 Angular SDKを使ってAuth0を統合し、認証の追加とユーザープロファイル情報の表示を行う方法について説明します。

このクイックスタートを使用するには、以下の手順に従います:

  • Auth0の無料アカウントにサインアップするか、Auth0にログインします。

  • 統合したいAngularプロジェクトを用意します。または、ログインした後に、サンプルアプリケーションを表示してダウンロードすることもできます。

+

Angularでユーザー認証を実装するための詳しい情報については、「例を挙げて説明するAngular認証ガイド」を参照してください。このガイドでは、サインアップボタンを作成する方法、ルートガードを追加する方法、そして保護されたAPIをAngularから呼び出す方法が詳しく説明されています。

Auth0を使用すると、アプリケーションに手軽に認証を追加することができます。このガイドは、AngularアプリケーションにAuth0 Angular SDKを使ってAuth0を統合し、認証の追加とユーザープロファイル情報の表示を行う方法について説明します。

このクイックスタートを使用するには、以下の手順に従います:

  • Auth0の無料アカウントにサインアップするか、Auth0にログインします。

  • 統合したいAngularプロジェクトを用意します。または、ログインした後に、サンプルアプリケーションを表示してダウンロードすることもできます。

## Auth0を構成する -

Auth0のサービスを利用するには、Auth0 Dashboadに設定済みのアプリケーションがある必要があります。Auth0アプリケーションは、開発中のプロジェクトに対してどのように認証が動作して欲しいかを構成する場所です。

アプリケーションを構成する

対話型のセレクターを使ってAuth0アプリケーションを新規作成するか、統合したいプロジェクトを表す既存のアプリケーションを選択します。Auth0のすべてのアプリケーションには英数字からなる一意のクライアントIDが割り当てられており、アプリケーションのコードがSDKを通じてAuth0 APIを呼び出す際に使用されます。

このクイックスタートを使って構成されたすべての設定は、Dashboardのアプリケーションを自動更新します。今後、アプリケーションの管理もDashboardで行えます。

代わりに完了済みの構成を見てみたい場合は、サンプルアプリケーションをご覧ください。

Callback URLを構成する

Callback URLとは、Auth0がユーザーを認証後にリダイレクトするアプリケーション内URLです。設定されていない場合、ユーザーはログイン後にアプリケーションに戻りません。

サンプルプロジェクトに沿って進めている場合は、http://localhost:4200に設定してください。

ログアウトURLを構成する

ログアウトURLとは、Auth0がユーザーをログアウト後にリダイレクトするアプリケーション内URLです。設定されていない場合、ユーザーはアプリケーションからログアウトできず、エラーを受け取ります。

サンプルプロジェクトに沿って進めている場合は、http://localhost:4200に設定してください。

Allowed Web Origins(許可されているWebオリジン)を構成する

[Allowed Web Origin(許可されているWebオリジン)]とは、認証フローにアクセスすることを許可して欲しいURLです。これにはプロジェクトのURLが含まれている必要があります。適切に設定されていない場合、プロジェクトが認証トークンを暗黙でリフレッシュできず、ユーザーがアプリケーションを再び訪問した時、またはページを再読み込みした時にログアウトした状態になってしまいます。

サンプルプロジェクトに沿って進めている場合は、http://localhost:4200に設定してください。

+

Auth0のサービスを利用するには、Auth0 Dashboadに設定済みのアプリケーションがある必要があります。Auth0アプリケーションは、開発中のプロジェクトに対してどのように認証が動作して欲しいかを構成する場所です。

アプリケーションを構成する

対話型のセレクターを使ってAuth0アプリケーションを新規作成するか、統合したいプロジェクトを表す既存のアプリケーションを選択します。Auth0のすべてのアプリケーションには英数字からなる一意のクライアントIDが割り当てられており、アプリケーションのコードがSDKを通じてAuth0 APIを呼び出す際に使用されます。

このクイックスタートを使って構成されたすべての設定は、Dashboardのアプリケーションを自動更新します。今後、アプリケーションの管理もDashboardで行えます。

代わりに完了済みの構成を見てみたい場合は、サンプルアプリケーションをご覧ください。

Callback URLを構成する

Callback URLとは、Auth0がユーザーを認証後にリダイレクトするアプリケーション内URLです。設定されていない場合、ユーザーはログイン後にアプリケーションに戻りません。

サンプルプロジェクトに沿って進めている場合は、http://localhost:4200に設定してください。

ログアウトURLを構成する

ログアウトURLとは、Auth0がユーザーをログアウト後にリダイレクトするアプリケーション内URLです。設定されていない場合、ユーザーはアプリケーションからログアウトできず、エラーを受け取ります。

サンプルプロジェクトに沿って進めている場合は、http://localhost:4200に設定してください。

Allowed Web Origins(許可されているWebオリジン)を構成する

[Allowed Web Origin(許可されているWebオリジン)]とは、認証フローにアクセスすることを許可して欲しいURLです。これにはプロジェクトのURLが含まれている必要があります。適切に設定されていない場合、プロジェクトが認証トークンを暗黙でリフレッシュできず、ユーザーがアプリケーションを再び訪問した時、またはページを再読み込みした時にログアウトした状態になってしまいます。

サンプルプロジェクトに沿って進めている場合は、http://localhost:4200に設定してください。

## Auth0 Angular SDKをインストールする -

Angularアプリで、Auth0の認証・認可を手軽に実装できるように、Auth0はAngular SDKを提供しています。

ターミナルで以下のコマンドを実行してAuth0 Angular SDKをインストールします:

npm install @auth0/auth0-angular

SDKはモジュールや認証サービスなど、Auth0をAngularアプリケーションに慣用的に統合しやすくする種類をいくつか公開しています。

+

Angularアプリで、Auth0の認証・認可を手軽に実装できるように、Auth0はAngular SDKを提供しています。

ターミナルで以下のコマンドを実行してAuth0 Angular SDKをインストールします:

npm install @auth0/auth0-angular

SDKはモジュールや認証サービスなど、Auth0をAngularアプリケーションに慣用的に統合しやすくする種類をいくつか公開しています。

## Auth0を登録・提供する {{{ data-action="code" data-code="main.ts#7:13" }}} -

SDKは、SDKが機能するために必要なすべてのサービスを含んだprovide関数である、provideAuth0をエクスポートします。これをアプリケーションで登録するには、以下のようにします。

  1. main.tsファイルを開きます。

  2. @auth0/auth0-angularパッケージからprovideAuth0関数をインポートします。

  3. provideAuth0bootstrapApplication内のprovidersに追加することで、アプリケーションに追加します。

  4. AuthServiceAppComponentに注入します。

provideAuth0関数はdomainプロパティとclientIdプロパティを取ります。これらのプロパティの値は、Auth0で登録したシングルページアプリケーション(SPA)の[Settings(設定)]にあるDomain(ドメイン)Client ID(クライアントID)の値に対応します。その上に、authorizationParams.redirect_uriを構成します。これによって、認証に成功した後、Auth0はユーザーを特定のURLにリダイレクトで戻すことができます。

Auth0を使用したカスタムドメインでは、ドメインプロパティの値は[Settings(設定)]タブに反映された値でなく、カスタムドメインの値になります。

+

SDKは、SDKが機能するために必要なすべてのサービスを含んだprovide関数である、provideAuth0をエクスポートします。これをアプリケーションで登録するには、以下のようにします。

  1. main.tsファイルを開きます。

  2. @auth0/auth0-angularパッケージからprovideAuth0関数をインポートします。

  3. provideAuth0bootstrapApplication内のprovidersに追加することで、アプリケーションに追加します。

  4. AuthServiceAppComponentに注入します。

provideAuth0関数はdomainプロパティとclientIdプロパティを取ります。これらのプロパティの値は、Auth0で登録したシングルページアプリケーション(SPA)の[Settings(設定)]にあるDomain(ドメイン)Client ID(クライアントID)の値に対応します。その上に、authorizationParams.redirect_uriを構成します。これによって、認証に成功した後、Auth0はユーザーを特定のURLにリダイレクトで戻すことができます。

Auth0を使用したカスタムドメインでは、ドメインプロパティの値は[Settings(設定)]タブに反映された値でなく、カスタムドメインの値になります。

## アプリケーションにログインを追加する {{{ data-action="code" data-code="login-button.ts#11:13" }}} -

Auth0アプリケーションとAuth0 Angular SDKの構成が完了したら、プロジェクトのためにログインをセットアップする必要があります。これを実現するには、AuthServiceクラスからSDKのloginWithRedirect()メソッドを使用して、ユーザーをAuth0のユニバーサルログインページにリダイレクトします。そこでAuth0はユーザーを認証することができます。ユーザーが認証に成功すると、アプリケーション、およびこのクイックスタートで前にセットアップしたCallback URLへリダイレクトされます。

アプリケーションで選択時にloginWithRedirect()を呼び出すログインボタンを作成します。

Angular手順4「チェックポイント」

アプリケーションにログインできるようになります。

アプリケーションを実行し、ログインボタンを選択します。以下の点を確認します:

  • ユーザー名とパスワードを使って、ログインまたはサインアップできる。

  • アプリケーションによってAuth0ユニバーサルログインページにリダイレクトされる。

  • 認証用にAuth0にリダイレクトされる。

  • 認証した後、Auth0はアプリケーションにリダイレクトで戻される。

  • コンソールでAuth0に関連したエラーを受け取らない。

+

Auth0アプリケーションとAuth0 Angular SDKの構成が完了したら、プロジェクトのためにログインをセットアップする必要があります。これを実現するには、AuthServiceクラスからSDKのloginWithRedirect()メソッドを使用して、ユーザーをAuth0のユニバーサルログインページにリダイレクトします。そこでAuth0はユーザーを認証することができます。ユーザーが認証に成功すると、アプリケーション、およびこのクイックスタートで前にセットアップしたCallback URLへリダイレクトされます。

アプリケーションで選択時にloginWithRedirect()を呼び出すログインボタンを作成します。

Angular手順4「チェックポイント」

アプリケーションにログインできるようになります。

アプリケーションを実行し、ログインボタンを選択します。以下の点を確認します:

  • ユーザー名とパスワードを使って、ログインまたはサインアップできる。

  • アプリケーションによってAuth0ユニバーサルログインページにリダイレクトされる。

  • 認証用にAuth0にリダイレクトされる。

  • 認証した後、Auth0はアプリケーションにリダイレクトで戻される。

  • コンソールでAuth0に関連したエラーを受け取らない。

-

Sorry about that. Here are a few things to double check:

  • make sure you configured the correct authorizationParams.redirect_uri

  • make sure you added theLoginButtonComponent button to the module's declarations

Still having issues? To get more help, check out our documentation or visit our community page.

+

すみません。いくつかの点をもう一度確認してください。

  • 正しいauthorizationParams.redirect_uriが構成されていることを確認します

  • モジュールの宣言にLogoutButtonComponentボタンが追加されていることを確認します

まだお困りですか?当社提供のドキュメントまたはコミュニティページで詳しい情報を確認してください。

## アプリケーションにログアウトを追加する {{{ data-action="code" data-code="logout-button.ts#19:25" }}} -

プロジェクトにログインしたユーザーには、ログアウトする方法も必要です。SDKには、AuthServiceクラスでアプリからユーザーをログアウトするのに使用できるlogout()メソッドが用意されています。ユーザーはログアウトすると、Auth0ログアウトエンドポイントにリダイレクトされてから、即座に、アプリケーションとこのクイックスタートで先ほどセットアップしたログアウトURLへとリダイレクトで戻されます。

アプリケーションで選択時にlogout()を呼び出すログアウトボタンを作成します。

SDKによってAuthServiceクラスでisAuthenticated$ Observableが公開されることで、ユーザーが認証されているかどうかを確認することができます。isAuthenticated$ Observableの値に基づいて、条件付きでログインボタンとログアウトボタンを作成することができます。または、シングルボタンを使って、ログインとログアウトの両方のボタンと条件付きレンダリングを組み合わせることができます。

Angular手順5「チェックポイント」

アプリケーションからログアウトできるようになります。

アプリケーションを実行し、ログインし、ログアウトボタンを選択します。以下の点を確認します:

  • Auth0のログアウトエンドポイントにリダイレクトされている。

  • Auth0がアプリケーションと正しいログアウトURLへのリダイレクトで戻される。

  • アプリケーションにログインしていない。

  • コンソールでAuth0に関連したエラーを受け取らない。

+

プロジェクトにログインしたユーザーには、ログアウトする方法も必要です。SDKには、AuthServiceクラスでアプリからユーザーをログアウトするのに使用できるlogout()メソッドが用意されています。ユーザーはログアウトすると、Auth0ログアウトエンドポイントにリダイレクトされてから、即座に、アプリケーションとこのクイックスタートで先ほどセットアップしたログアウトURLへとリダイレクトで戻されます。

アプリケーションで選択時にlogout()を呼び出すログアウトボタンを作成します。

SDKによってAuthServiceクラスでisAuthenticated$ Observableが公開されることで、ユーザーが認証されているかどうかを確認することができます。isAuthenticated$ Observableの値に基づいて、条件付きでログインボタンとログアウトボタンを作成することができます。または、シングルボタンを使って、ログインとログアウトの両方のボタンと条件付きレンダリングを組み合わせることができます。

Angular手順5「チェックポイント」

アプリケーションからログアウトできるようになります。

アプリケーションを実行し、ログインし、ログアウトボタンを選択します。以下の点を確認します:

  • Auth0のログアウトエンドポイントにリダイレクトされている。

  • Auth0がアプリケーションと正しいログアウトURLへのリダイレクトで戻される。

  • アプリケーションにログインしていない。

  • コンソールでAuth0に関連したエラーを受け取らない。

-

Sorry about that. Here are a few things to double check:

  • make sure that you configured the logout URL as one of the Allowed Logout URLS in your application's Settings

  • check that you added the LogoutButtonComponent to the module's declarations

  • inspect the application logs for further errors

Still having issues? To get more help, check out our documentation or visit our community page.

+

すみません。いくつかの点をもう一度確認してください。

  • ログアウトURLが[Allowed Logout URLs(許可されているログアウトURL)]としてアプリケーションの[Settings(設定)]で構成されていることを確認します

  • モジュールの宣言にLogoutButtonComponentが追加されていることを確認します

  • アプリケーションログで他にもエラーがないかを調べます

まだお困りですか?当社提供のドキュメントまたはコミュニティページで詳しい情報を確認してください。

## ユーザープロファイル情報を表示する {{{ data-action="code" data-code="user-profile.ts" }}} -

ユーザーがログインやログアウトできるようになったら、認証済みのユーザーに関連付けられたプロファイル情報を取得できるようにしたいと考えるはずです。たとえば、ログインしたユーザーの名前やプロフィール写真を表示することで、ユーザーインターフェイスをパーソナライズできるようになりたいかもしれません。

Auth0 Angular SDKは、AuthServiceクラスによって公開されたuser$ Observableを介してユーザー情報を提供します。user$ Observableにはユーザーのアイデンティティに関する機密情報とアーティファクトが含まれるため、この方法が使用できるかはユーザーの認証ステータスによります。幸い、user$ Observableは、isAuthenticated$ Observableがtrueである場合にのみ値を出力するよう構成されています。そのため、ユーザープロファイルデータにアクセスする前に、認証状態を手動で確認する必要はありません。

SDKは、AuthServiceクラスでユーザーが認証されているかどうかを確認することができるisAuthenticated$ Observableも公開します。これを使って、たとえば、UI要素を表示・非表示にするかを判断することができます。

インタラクティブパネルでUserProfileComponentコードを確認し、これらの関数の使用方法の例をチェックします。

Angular手順6「チェックポイント」

ユーザープロファイル情報を表示することができるようになります。

アプリケーションを実行して次の点を確認します:

  • ログイン後にユーザー情報が正しく表示される。

  • ログアウト後にユーザー情報が表示されない。

+

ユーザーがログインやログアウトできるようになったら、認証済みのユーザーに関連付けられたプロファイル情報を取得できるようにしたいと考えるはずです。たとえば、ログインしたユーザーの名前やプロフィール写真を表示することで、ユーザーインターフェイスをパーソナライズできるようになりたいかもしれません。

Auth0 Angular SDKは、AuthServiceクラスによって公開されたuser$ Observableを介してユーザー情報を提供します。user$ Observableにはユーザーのアイデンティティに関する機密情報とアーティファクトが含まれるため、この方法が使用できるかはユーザーの認証ステータスによります。幸い、user$ Observableは、isAuthenticated$ Observableがtrueである場合にのみ値を出力するよう構成されています。そのため、ユーザープロファイルデータにアクセスする前に、認証状態を手動で確認する必要はありません。

SDKは、AuthServiceクラスでユーザーが認証されているかどうかを確認することができるisAuthenticated$ Observableも公開します。これを使って、たとえば、UI要素を表示・非表示にするかを判断することができます。

インタラクティブパネルでUserProfileComponentコードを確認し、これらの関数の使用方法の例をチェックします。

Angular手順6「チェックポイント」

ユーザープロファイル情報を表示することができるようになります。

アプリケーションを実行して次の点を確認します:

  • ログイン後にユーザー情報が正しく表示される。

  • ログアウト後にユーザー情報が表示されない。

-

Sorry about that. Here are a few things to double check:

  • make sure you are logged in

  • make sure you are trying to access an existing property such as user.name

  • make sure you added the UserProfileComponent component to the correct module's declarations

Still having issues? To get more help, check out our documentation or visit our community page.

+

すみません。いくつかの点をもう一度確認してください。

  • ログインしていることを確認します

  • user.nameなど、既存のプロパティにアクセスしようとしていることを確認します

  • 正しいモジュールの宣言にUserProfileComponentコンポーネントが追加されていることを確認します

まだお困りですか?当社提供のドキュメントまたはコミュニティページで詳しい情報を確認してください。

diff --git a/ja-jp/articles/quickstart/spa/flutter/interactive.md b/ja-jp/articles/quickstart/spa/flutter/interactive.md index 0858faeac4..783f284340 100644 --- a/ja-jp/articles/quickstart/spa/flutter/interactive.md +++ b/ja-jp/articles/quickstart/spa/flutter/interactive.md @@ -6,19 +6,19 @@ files: - files/main_view - files/profile_view github: - path: https://github.com/auth0-samples/auth0-flutter-samples/tree/main/sample + path: sample locale: ja-JP --- # Flutterアプリケーションにログインを追加する -

Auth0を使用すると、アプリケーションに手軽に認証を追加して、ユーザープロファイル情報にアクセスすることができます。このガイドでは、FlutterアプリケーションにAuth0 Flutter SDKを使ってAuth0を統合する方法を説明します。

Flutter SDKは現在、Android、iOS、またはWebプラットフォームで実行されるFlutterアプリケーションのみに対応しています。

このクイックスタートでは、すでにFlutterアプリケーションが問題なく作動しているものとします。そうでない場合は、Flutter「入門」ガイドをチェックして、シンプルなアプリの始め方を確認してください。

Flutterコマンドラインツールの知識も必要になります。

+

Auth0を使用すると、アプリケーションに手軽に認証を追加して、ユーザープロファイル情報にアクセスすることができます。このガイドでは、FlutterアプリケーションにAuth0 Flutter SDKを使ってAuth0を統合する方法を説明します。

Flutter SDKは現在、Android、iOS、またはWebプラットフォームで実行されるFlutterアプリケーションのみに対応しています。

このクイックスタートでは、すでにFlutterアプリケーションが問題なく作動しているものとします。そうでない場合は、Flutter「入門」ガイドをチェックして、シンプルなアプリの始め方を確認してください。

Flutterコマンドラインツールの知識も必要になります。

## Auth0を構成する -

Auth0にサインアップすると、新しいアプリケーションが作成されたか、あるいは既に作成していた可能性があります。Auth0と通信するためのアプリケーションに関する詳細が必要になります。これらの詳細は、Auth0 Dashboardのアプリケーションの設定セクションで入手することができます。

null

ネイティブまたはシングルページアプリケーションでデフォルトのアプリを使用する場合は、[Token Endpoint Authentication Method(トークンエンドポイント認証方法)]Noneに更新し、[Application Type(アプリケーションタイプ)]SPAまたはNativeに設定していることを確認します。

必要な情報は以下のとおりです。

  • Domain(ドメイン)

  • Client ID(クライアントID)

このページの上部からサンプルをダウンロードする場合、これらの詳細は入力されています。

Callback URLを構成する

Callback URLとは、Auth0によって認証後のユーザーをリダイレクトするアプリケーション内URLです。アプリのCallback URLは、アプリケーションの設定[Allowed Callback URLs(許可されているコールバックURL)]フィールドに追加される必要があります。このフィールドが設定されていない場合、ユーザーはアプリケーションにログインできず、エラーが返されます。

このページの上部からダウンロードしたサンプルプロジェクトに沿って進めている場合には、[Allowed Callback URLs(許可されているコールバックURL)]http://localhost:3000を設定します。

ログアウトURLを構成する

ログアウトURLとは、ユーザーが認可サーバーからログアウトした後にAuth0が戻ることができるアプリケーション内URLです。これは、returnToクエリパラメーターで指定されています。アプリのログアウトURLは、アプリケーションの設定[Allowed Logout URLs(許可されているログアウトURL)]フィールドに追加される必要があります。このフィールドが設定されていない場合、ユーザーはアプリケーションからログアウトできず、エラーが返されます。

このページの上部からダウンロードしたサンプルプロジェクトに沿って進めている場合には、[Allowed Logout URLs(許可されているログアウトURL)]フィールドに追加する必要があるログアウトURLはhttp://localhost:3000です。

許可されているWebオリジンを構成する

アプリのURLをアプリケーションの設定[Allowed Web Origins(許可されているWebオリジン)]フィールドに追加する必要があります。ここでアプリケーションURLを登録しないと、アプリケーションは認証トークンを暗黙でリフレッシュできず、ユーザーがアプリケーションを再び訪問した時、またはページを再読み込みした時にログアウトした状態になってしまいます。

このページの上部からダウンロードしたサンプルプロジェクトに沿って進めている場合には、[Allowed Web Origins(許可されているWebオリジン)]http://localhost:3000に設定します。

+

Auth0にサインアップすると、新しいアプリケーションが作成されたか、あるいは既に作成していた可能性があります。Auth0と通信するためのアプリケーションに関する詳細が必要になります。これらの詳細は、Auth0 Dashboardのアプリケーションの設定セクションで入手することができます。

null

ネイティブまたはシングルページアプリケーションでデフォルトのアプリを使用する場合は、[Token Endpoint Authentication Method(トークンエンドポイント認証方法)]Noneに更新し、[Application Type(アプリケーションタイプ)]SPAまたはNativeに設定していることを確認します。

必要な情報は以下のとおりです。

  • Domain(ドメイン)

  • Client ID(クライアントID)

このページの上部からサンプルをダウンロードする場合、これらの詳細は入力されています。

Callback URLを構成する

Callback URLとは、Auth0によって認証後のユーザーをリダイレクトするアプリケーション内URLです。アプリのCallback URLは、アプリケーションの設定[Allowed Callback URLs(許可されているコールバックURL)]フィールドに追加される必要があります。このフィールドが設定されていない場合、ユーザーはアプリケーションにログインできず、エラーが返されます。

このページの上部からダウンロードしたサンプルプロジェクトに沿って進めている場合には、[Allowed Callback URLs(許可されているコールバックURL)]http://localhost:3000を設定します。

ログアウトURLを構成する

ログアウトURLとは、ユーザーが認可サーバーからログアウトした後にAuth0が戻ることができるアプリケーション内URLです。これは、returnToクエリパラメーターで指定されています。アプリのログアウトURLは、アプリケーションの設定[Allowed Logout URLs(許可されているログアウトURL)]フィールドに追加される必要があります。このフィールドが設定されていない場合、ユーザーはアプリケーションからログアウトできず、エラーが返されます。

このページの上部からダウンロードしたサンプルプロジェクトに沿って進めている場合には、[Allowed Logout URLs(許可されているログアウトURL)]フィールドに追加する必要があるログアウトURLはhttp://localhost:3000です。

許可されているWebオリジンを構成する

アプリのURLをアプリケーションの設定[Allowed Web Origins(許可されているWebオリジン)]フィールドに追加する必要があります。ここでアプリケーションURLを登録しないと、アプリケーションは認証トークンを暗黙でリフレッシュできず、ユーザーがアプリケーションを再び訪問した時、またはページを再読み込みした時にログアウトした状態になってしまいます。

このページの上部からダウンロードしたサンプルプロジェクトに沿って進めている場合には、[Allowed Web Origins(許可されているWebオリジン)]http://localhost:3000に設定します。

## Auth0 Flutter SDKをインストールする @@ -36,7 +36,7 @@ locale: ja-JP ## アプリケーションにログインを追加する {{{ data-action="code" data-code="main_view.dart" }}} -

アプリに認証をセットアップするには、ユニバーサルログインが最も手軽な方法です。最良のエクスペリエンス、高い安全性、幅広い機能を活用するためにも、ユニバーサルログインの使用をお勧めします。

Auth0Webクラスを使用して、Auth0のユニバーサルログインをFlutter Webアプリに統合します。loginWithRedirect()を使用して、ユーザーをAuth0のユニバーサルログインページにリダイレクトします。

通常、redirectUrlパラメーターをloginWithRedirectに指定する必要があります。この操作を省くと、Auth0はデフォルトで構成されていない、デフォルトのログインルートを使用することになります。

ユーザーはログインすると、リダイレクトでアプリケーションに戻されます。次に、起動中にonLoadを呼び出し、付与された資格情報を処理することで、このユーザーのIDとアクセストークンにアクセスすることができます。

auth0.onLoad().then((final credentials) => setState(() {
+

アプリに認証をセットアップするには、ユニバーサルログインが最も手軽な方法です。最良のエクスペリエンス、高い安全性、幅広い機能を活用するためにも、ユニバーサルログインの使用をお勧めします。

Auth0Webクラスを使用して、Auth0のユニバーサルログインをFlutter Webアプリに統合します。loginWithRedirect()を使用して、ユーザーをAuth0のユニバーサルログインページにリダイレクトします。

通常、redirectUrlパラメーターをloginWithRedirectに指定する必要があります。この操作を省くと、Auth0はデフォルトで構成されていない、デフォルトのログインルートを使用することになります。

ユーザーはログインすると、リダイレクトでアプリケーションに戻されます。次に、起動中にonLoadを呼び出し、付与された資格情報を処理することで、このユーザーのIDとアクセストークンにアクセスすることができます。

auth0.onLoad().then((final credentials) => setState(() {
 
     // Handle or store credentials here
 
@@ -50,18 +50,18 @@ locale: ja-JP
 
   
-

If your application did not launch successfully:

  • Ensure the Allowed Callback URLs are set properly

  • Verify you saved your changes after entering your URLs

  • Make sure the domain and client ID values are imported correctly

Still having issues? Check out our documentation or visit our community page to get more help.

+

アプリケーションが正常に起動しなかった場合は以下を行います。

  • [Allowed Callback URLs(許可されているCallback URL)]が正しく設定されていることを確認します

  • URLを入力した後で保存したことを確認します

  • ドメインとクライアントIDの値が正常にインポートされていることを確認します

まだお困りですか?当社提供のドキュメントまたはコミュニティページで詳しい情報を確認してください。

## アプリケーションにログアウトを追加する -

ユーザーをログアウトさせるには、Auth0 Flutter SDKのlogout()を呼び出してログインセッションをクリアし、ユーザーをAuth0のログアウトエンドポイントにリダイレクトします。Auth0からのログアウトについて詳しい情報をお読みください

通常、logoutを呼び出すときにreturnToUrlを指定しますが、そうしない場合、Auth0は [Allowed Logout URLs(許可されているログアウトURL)]リストの最初のURLにデフォルトで指定されます

Flutter web手順4「チェックポイント」

logout()を呼び出し、ユーザーをアプリケーションからログアウトするアプリにボタンを追加します。このボタンを選択すると、Flutterアプリがログアウトエンドポイントにリダイレクトしてからもう一度戻ることを確認します。アプリケーションにはログインされていないはずです。

+

ユーザーをログアウトさせるには、Auth0 Flutter SDKのlogout()を呼び出してログインセッションをクリアし、ユーザーをAuth0のログアウトエンドポイントにリダイレクトします。Auth0からのログアウトについて詳しい情報をお読みください

通常、logoutを呼び出すときにreturnToUrlを指定しますが、そうしない場合、Auth0は [Allowed Logout URLs(許可されているログアウトURL)]リストの最初のURLにデフォルトで指定されます

Flutter web手順4「チェックポイント」

logout()を呼び出し、ユーザーをアプリケーションからログアウトするアプリにボタンを追加します。このボタンを選択すると、Flutterアプリがログアウトエンドポイントにリダイレクトしてからもう一度戻ることを確認します。アプリケーションにはログインされていないはずです。

-

If your application did not log out successfully:

  • Ensure the Allowed Logout URLs are set properly

  • Verify you saved your changes after entering your URLs

Still having issues? Check out our documentation or visit our community page to get more help.

+

アプリケーションが正常にログアウトしなかった場合は以下を行います。

  • [Allowed Logout URLs(許可されているログアウトURL)]が正しく設定されていることを確認します

  • URLを入力した後で保存したことを確認します

まだお困りですか?当社提供のドキュメントまたはコミュニティページで詳しい情報を確認してください。

@@ -72,6 +72,6 @@ locale: ja-JP
-

If your application did not return user profile information:

  • Verify the ID token is valid

Still having issues? Check out our documentation or visit our community page to get more help.

+

アプリケーションがユーザープロファイル情報を返さなかった場合には以下を行います。

  • IDトークンが有効であることを確認します

まだお困りですか?当社提供のドキュメントまたはコミュニティページで詳しい情報を確認してください。

diff --git a/ja-jp/articles/quickstart/spa/react/interactive.md b/ja-jp/articles/quickstart/spa/react/interactive.md index 30c4053cfe..93ebac4457 100644 --- a/ja-jp/articles/quickstart/spa/react/interactive.md +++ b/ja-jp/articles/quickstart/spa/react/interactive.md @@ -8,66 +8,66 @@ files: - files/logout - files/profile github: - path: https://github.com/auth0-samples/auth0-react-samples/tree/master/Sample-01 + path: Sample-01 locale: ja-JP --- # Reactアプリケーションにログインを追加する -

Auth0を使用すると、アプリケーションに手軽に認証を追加することができます。このガイドは、ReactアプリケーションにAuth0 React SDKを使ってAuth0を統合し、認証の追加とユーザープロファイル情報の表示を行う方法について説明します。

このクイックスタートを使用するには、以下の手順に従います:

  • Auth0の無料アカウントにサインアップするか、Auth0にログインします。

  • 統合したいReactアプリケーションを用意します。または、ログインした後に、サンプルアプリケーションを表示してダウンロードすることもできます。

Reactでユーザー認証を実装するための詳しい情報については、例を挙げて説明するReact認証ガイドを参照してください。このガイドでは、サインアップボタンを作成する方法、React Routerを使用してルートガードを追加する方法、そして保護されたAPIをReactから呼び出す方法が詳しく説明されています。

+

Auth0を使用すると、アプリケーションに手軽に認証を追加することができます。このガイドは、ReactアプリケーションにAuth0 React SDKを使ってAuth0を統合し、認証の追加とユーザープロファイル情報の表示を行う方法について説明します。

このクイックスタートを使用するには、以下の手順に従います:

  • Auth0の無料アカウントにサインアップするか、Auth0にログインします。

  • 統合したいReactアプリケーションを用意します。または、ログインした後に、サンプルアプリケーションを表示してダウンロードすることもできます。

Reactでユーザー認証を実装するための詳しい情報については、例を挙げて説明するReact認証ガイドを参照してください。このガイドでは、サインアップボタンを作成する方法、React Routerを使用してルートガードを追加する方法、そして保護されたAPIをReactから呼び出す方法が詳しく説明されています。

## Auth0を構成する -

Auth0のサービスを利用するには、Auth0 Dashboadに設定済みのアプリケーションがある必要があります。Auth0アプリケーションは、開発中のプロジェクトに対してどのように認証が動作して欲しいかを構成する場所です。

アプリケーションを構成する

対話型のセレクターを使ってAuth0アプリケーションを新規作成するか、統合したいプロジェクトを表す既存のアプリケーションを選択します。Auth0のすべてのアプリケーションには英数字からなる一意のクライアントIDが割り当てられており、アプリケーションのコードがSDKを通じてAuth0 APIを呼び出す際に使用されます。

このクイックスタートを使って構成されたすべての設定は、Dashboardのアプリケーションを自動更新します。今後、アプリケーションの管理もDashboardで行えます。

完了済みの構成を見てみたい場合は、サンプルアプリケーションをご覧ください。

Callback URLを構成する

Callback URLとは、Auth0がユーザーを認証後にリダイレクトするアプリケーション内URLです。設定されていない場合、ユーザーはログイン後にアプリケーションに戻りません。

サンプルプロジェクトに沿って進めている場合は、http://localhost:3000に設定してください。

ログアウトURLを構成する

ログアウトURLとは、Auth0がユーザーをログアウト後にリダイレクトするアプリケーション内URLです。設定されていない場合、ユーザーはアプリケーションからログアウトできず、エラーを受け取ります。

サンプルプロジェクトに沿って進めている場合は、http://localhost:3000に設定してください。

Allowed Web Origins(許可されているWebオリジン)を構成する

Allowed Web Origin(許可されているWebオリジン)とは、認証フローへのアクセスを許可されるURLです。これにはプロジェクトのURLが含まれている必要があります。適切に設定されていない場合、プロジェクトが認証トークンを暗黙でリフレッシュできず、ユーザーがアプリケーションを再び訪問した時、またはページを再読み込みした時にログアウトした状態になってしまいます。

サンプルプロジェクトに沿って進めている場合は、http://localhost:3000に設定してください。

+

Auth0のサービスを利用するには、Auth0 Dashboadに設定済みのアプリケーションがある必要があります。Auth0アプリケーションは、開発中のプロジェクトに対してどのように認証が動作して欲しいかを構成する場所です。

アプリケーションを構成する

対話型のセレクターを使ってAuth0アプリケーションを新規作成するか、統合したいプロジェクトを表す既存のアプリケーションを選択します。Auth0のすべてのアプリケーションには英数字からなる一意のクライアントIDが割り当てられており、アプリケーションのコードがSDKを通じてAuth0 APIを呼び出す際に使用されます。

このクイックスタートを使って構成されたすべての設定は、Dashboardのアプリケーションを自動更新します。今後、アプリケーションの管理もDashboardで行えます。

完了済みの構成を見てみたい場合は、サンプルアプリケーションをご覧ください。

Callback URLを構成する

Callback URLとは、Auth0がユーザーを認証後にリダイレクトするアプリケーション内URLです。設定されていない場合、ユーザーはログイン後にアプリケーションに戻りません。

サンプルプロジェクトに沿って進めている場合は、http://localhost:3000に設定してください。

ログアウトURLを構成する

ログアウトURLとは、Auth0がユーザーをログアウト後にリダイレクトするアプリケーション内URLです。設定されていない場合、ユーザーはアプリケーションからログアウトできず、エラーを受け取ります。

サンプルプロジェクトに沿って進めている場合は、http://localhost:3000に設定してください。

Allowed Web Origins(許可されているWebオリジン)を構成する

Allowed Web Origin(許可されているWebオリジン)とは、認証フローへのアクセスを許可されるURLです。これにはプロジェクトのURLが含まれている必要があります。適切に設定されていない場合、プロジェクトが認証トークンを暗黙でリフレッシュできず、ユーザーがアプリケーションを再び訪問した時、またはページを再読み込みした時にログアウトした状態になってしまいます。

サンプルプロジェクトに沿って進めている場合は、http://localhost:3000に設定してください。

## Auth0 React SDKをインストールする {{{ data-action="code" data-code="index.js" }}} -

Reactアプリで、Auth0の認証・認可を手軽に実装できるように、Auth0はReact SDK(auth0-react.js)を提供しています。

ターミナルで以下のコマンドを実行してAuth0 React SDKをインストールします:

cd <your-project-directory>
+

Reactアプリで、Auth0の認証・認可を手軽に実装できるように、Auth0はReact SDK(auth0-react.js)を提供しています。

ターミナルで以下のコマンドを実行してAuth0 React SDKをインストールします:

cd <your-project-directory>
 
 npm install @auth0/auth0-react
 
 
-

Auth0Providerコンポーネントを構成する

SDKが正しく機能するためには、次のプロパティをAuth0Providerコンポーネントで設定しなければなりません:

  • domain:Auth0テナントのドメインです。通常、Auth0 Dashboardにあるアプリケーションの設定の[Domain(ドメイン)]フィールドで確認できます。カスタムドメインを使用している場合は、その値を代わりに設定してください。

  • clientId:このクイックスタートで前にセットアップした、Auth0アプリケーションのIDです。Auth0 Dashboardにあるアプリケーションの設定の[Client ID(クライアントID)]フィールドで確認できます。

  • authorizationParams.redirect_uri:ユーザー認証の後、Auth0にユーザーをリダイレクトして欲しいアプリケーション内URLです。このクイックスタートで前にセットアップしたCallback URLと呼応します。Auth0 Dashboardにあるアプリケーションの[Settings(設定)]の[Callback URLs(コールバックURL)]フィールドでもこの値を確認できます。コードに入力した値と前にセットアップした値は必ず一致させてください。異なった場合はユーザーにエラーが表示されます。

Reactクイックスタート - 手順2「チェックポイント」

Auth0Providerコンポーネントが適切に構成されました。アプリケーションを実行して次の点を検証します:

  • SDKが正しく初期化している。

  • アプリケーションがAuth0に関連したエラーを投入していない。

+

Auth0Providerコンポーネントを構成する

SDKが正しく機能するためには、次のプロパティをAuth0Providerコンポーネントで設定しなければなりません:

  • domain:Auth0テナントのドメインです。通常、Auth0 Dashboardにあるアプリケーションの設定の[Domain(ドメイン)]フィールドで確認できます。カスタムドメインを使用している場合は、その値を代わりに設定してください。

  • clientId:このクイックスタートで前にセットアップした、Auth0アプリケーションのIDです。Auth0 Dashboardにあるアプリケーションの設定の[Client ID(クライアントID)]フィールドで確認できます。

  • authorizationParams.redirect_uri:ユーザー認証の後、Auth0にユーザーをリダイレクトして欲しいアプリケーション内URLです。このクイックスタートで前にセットアップしたCallback URLと呼応します。Auth0 Dashboardにあるアプリケーションの[Settings(設定)]の[Callback URLs(コールバックURL)]フィールドでもこの値を確認できます。コードに入力した値と前にセットアップした値は必ず一致させてください。異なった場合はユーザーにエラーが表示されます。

Reactクイックスタート - 手順2「チェックポイント」

Auth0Providerコンポーネントが適切に構成されました。アプリケーションを実行して次の点を検証します:

  • SDKが正しく初期化している。

  • アプリケーションがAuth0に関連したエラーを投入していない。

-

Sorry about that. Here's a couple things to double check:

  • make sure the correct application is selected

  • did you save after entering your URLs?

  • make sure the domain and client ID imported correctly

Still having issues? Check out our documentation or visit our community page to get more help.

+

すみません。いくつかの点をもう一度確認してください。

  • 正しいアプリケーションが選択されていることを確認します

  • URLを入力した後で保存しましたか?

  • ドメインとクライアントIDが正常にインポートされていることを確認します

まだお困りですか?当社提供のドキュメントまたはコミュニティページで詳しい情報を確認してください。

## アプリケーションにログインを追加する {{{ data-action="code" data-code="login.js" }}} -

Auth0アプリケーションとAuth0 React SDKの構成が完了したら、プロジェクトのためにログインをセットアップする必要があります。これを実現するには、SDKのloginWithRedirect()メソッドを使用して、ユーザをAuth0のユニバーサルログインページにリダイレクトするログインボタンを作成します。ユーザーが認証に成功すると、このクイックスタートで前にセットアップしたCallback URLへリダイレクトされます。

このガイドではuseAuth0()のカスタムReactフックに焦点を当てています。クラスコンポーネントを使用している場合は、withAuth0()を使用したこちらのサンプルを確認してください。

ログインボタンコンポーネントのためにアプリケーションでlogin.jsという名前の新規ファイルを作成し、インタラクティブパネルから右へとコードにコピーします。これにはログインに必要なロジックが含まれています。それからindex.jsファイルを更新して新しいログインボタンを含めます。

Reactクイックスタート - 手順3「チェックポイント」

ユーザー名とパスワードを使ってログインやサインアップができるようになりました。

ログインボタンをクリックして次の点を検証します:

  • ReactアプリケーションによってAuth0ユニバーサルログインページにリダイレクトされる。

  • ログインまたはサインアップできる。

  • Auth0が、Auth0Providerを構成するために使ったauthorizationParams.redirect_uriの値を使用し、アプリケーションへリダイレクトする。

+

Auth0アプリケーションとAuth0 React SDKの構成が完了したら、プロジェクトのためにログインをセットアップする必要があります。これを実現するには、SDKのloginWithRedirect()メソッドを使用して、ユーザをAuth0のユニバーサルログインページにリダイレクトするログインボタンを作成します。ユーザーが認証に成功すると、このクイックスタートで前にセットアップしたCallback URLへリダイレクトされます。

このガイドではuseAuth0()のカスタムReactフックに焦点を当てています。クラスコンポーネントを使用している場合は、withAuth0()を使用したこちらのサンプルを確認してください。

ログインボタンコンポーネントのためにアプリケーションでlogin.jsという名前の新規ファイルを作成し、インタラクティブパネルから右へとコードにコピーします。これにはログインに必要なロジックが含まれています。それからindex.jsファイルを更新して新しいログインボタンを含めます。

Reactクイックスタート - 手順3「チェックポイント」

ユーザー名とパスワードを使ってログインやサインアップができるようになりました。

ログインボタンをクリックして次の点を検証します:

  • ReactアプリケーションによってAuth0ユニバーサルログインページにリダイレクトされる。

  • ログインまたはサインアップできる。

  • Auth0が、Auth0Providerを構成するために使ったauthorizationParams.redirect_uriの値を使用し、アプリケーションへリダイレクトする。

-

Sorry about that. Here's a couple things to double check:

  • you configured the correct authorizationParams.redirect_uri

  • you added the Login button to the index.js file

Still having issues? Check out our documentation or visit our community page to get more help.

+

すみません。いくつかの点をもう一度確認してください。

  • 正しいauthorizationParams.redirect_uriが構成されている

  • ログインボタンがindex.jsファイルに追加されている

まだお困りですか?当社提供のドキュメントまたはコミュニティページで詳しい情報を確認してください。

## アプリケーションにログアウトを追加する {{{ data-action="code" data-code="logout.js" }}} -

プロジェクトにログインしたユーザーには、ログアウトする方法も必要です。SDKのlogout()メソッドを使用してログアウトボタンを作成します。ユーザーはログアウトすると、Auth0ログアウトエンドポイントにリダイレクトされてから、即座に、このクイックスタートで先ほどセットアップしたログアウトURLにリダイレクトで戻されます。

ログアウトボタンコンポーネントのためにアプリケーションでlogout.jsという名前の新規ファイルを作成し、インタラクティブパネルからコードにコピーします。これにはログアウトに必要なロジックが含まれています。それからindex.jsファイルを更新して新しいログアウトボタンを含めます。

Reactクイックスタート - 手順4「チェックポイント」

アプリケーションを実行してログアウトボタンをクリックし、次の点を検証します:

  • Reactアプリケーションによって、アプリケーションの設定で[Allowed Logout URLs(許可されているログアウトURL)]の一つに指定したアドレスへリダイレクトされる。

  • アプリケーションにログインしていない。

+

プロジェクトにログインしたユーザーには、ログアウトする方法も必要です。SDKのlogout()メソッドを使用してログアウトボタンを作成します。ユーザーはログアウトすると、Auth0ログアウトエンドポイントにリダイレクトされてから、即座に、このクイックスタートで先ほどセットアップしたログアウトURLにリダイレクトで戻されます。

ログアウトボタンコンポーネントのためにアプリケーションでlogout.jsという名前の新規ファイルを作成し、インタラクティブパネルからコードにコピーします。これにはログアウトに必要なロジックが含まれています。それからindex.jsファイルを更新して新しいログアウトボタンを含めます。

Reactクイックスタート - 手順4「チェックポイント」

アプリケーションを実行してログアウトボタンをクリックし、次の点を検証します:

  • Reactアプリケーションによって、アプリケーションの設定で[Allowed Logout URLs(許可されているログアウトURL)]の一つに指定したアドレスへリダイレクトされる。

  • アプリケーションにログインしていない。

-

Sorry about that. Here's a couple things to double check:

  • you configured the correct Logout URL

  • you added the Logout button to the index.js file

Still having issues? Check out our documentation or visit our community page to get more help.

+

すみません。いくつかの点をもう一度確認してください。

  • 正しいログアウトURLが構成されている

  • ログアウトボタンがindex.jsファイルに追加されている

まだお困りですか?当社提供のドキュメントまたはコミュニティページで詳しい情報を確認してください。

## ユーザープロファイル情報を表示する {{{ data-action="code" data-code="profile.js" }}} -

ユーザーがログインやログアウトできるようになったら、認証済のユーザーに関連付けられたプロファイル情報を取得できるようにしたいと考えるはずです。たとえば、ログインしたユーザーの名前やプロファイル画像をプロジェクトに表示できるようになりたいかもしれません。

React用のAuth0 SDKでは、userプロパティを通じてユーザー情報を提供します。インタラクティブパネルでprofile.jsコードを確認し、使用方法の例をチェックします。

userプロパティにはユーザーのアイデンティティに関する機密情報が含まれるため、この方法が使用できるかはユーザーの認証ステータスによります。エラーを防ぐため、常に以下を行ってください:

  • Reactがuserプロパティを使用するコンポーネントを呼び出す前に、isAuthenticatedプロパティを使用してAuth0がユーザーを認証したかどうかを定義する。

  • isAuthenticatedプロパティにアクセスする前に、isLoadingがfalseであることをチェックして、SDKの読み込みが完了したことを確認する。

null

Reactクイックスタート - 手順5「チェックポイント」

以下の点を確認します:

  • ログイン後、コンポーネント内のuser.name やその他のユーザープロパティをすべて正しく表示できる。

+

ユーザーがログインやログアウトできるようになったら、認証済のユーザーに関連付けられたプロファイル情報を取得できるようにしたいと考えるはずです。たとえば、ログインしたユーザーの名前やプロファイル画像をプロジェクトに表示できるようになりたいかもしれません。

React用のAuth0 SDKでは、userプロパティを通じてユーザー情報を提供します。インタラクティブパネルでprofile.jsコードを確認し、使用方法の例をチェックします。

userプロパティにはユーザーのアイデンティティに関する機密情報が含まれるため、この方法が使用できるかはユーザーの認証ステータスによります。エラーを防ぐため、常に以下を行ってください:

  • Reactがuserプロパティを使用するコンポーネントを呼び出す前に、isAuthenticatedプロパティを使用してAuth0がユーザーを認証したかどうかを定義する。

  • isAuthenticatedプロパティにアクセスする前に、isLoadingがfalseであることをチェックして、SDKの読み込みが完了したことを確認する。

null

Reactクイックスタート - 手順5「チェックポイント」

以下の点を確認します:

  • ログイン後、コンポーネント内のuser.name やその他のユーザープロパティをすべて正しく表示できる。

-

Sorry about that. Here's a couple things to double check:

  • you added the isLoading check before accessing the isAuthenticated property

  • you added the Profile component to the index.js file

Still having issues? Check out our documentation or visit our community page to get more help.

+

すみません。いくつかの点をもう一度確認してください。

  • isAuthenticatedプロパティへのアクセス以前にisLoadingの確認が追加されている

  • Profileコンポーネントがindex.jsファイルに追加されている

まだお困りですか?当社提供のドキュメントまたはコミュニティページで詳しい情報を確認してください。

diff --git a/ja-jp/articles/quickstart/spa/vanillajs/interactive.md b/ja-jp/articles/quickstart/spa/vanillajs/interactive.md index 7d46244889..8305c130e4 100644 --- a/ja-jp/articles/quickstart/spa/vanillajs/interactive.md +++ b/ja-jp/articles/quickstart/spa/vanillajs/interactive.md @@ -5,19 +5,19 @@ interactive: true files: - files/app github: - path: https://github.com/auth0-samples/auth0-javascript-samples/tree/master/01-Login + path: 01-Login locale: ja-JP --- # JavaScriptアプリケーションにログインを追加する -

Auth0を使用すると、アプリケーションに手軽に認証を追加することができます。このガイドは、単純なJavaScriptを使用するシングルページアプリケーション(SPA)にAuth0 SPA SDKを使ってAuth0を統合し、認証の追加とユーザープロファイル情報の表示を行う方法について説明します。

このクイックスタートを使用するには、以下の手順に従います:

  • Auth0の無料アカウントにサインアップするか、Auth0にログインします。

  • 統合したいプロジェクトを用意します。または、ログインした後に、サンプルアプリケーションを表示してダウンロードすることもできます。

このクイックスタートでは、ReactやAngularなどのフレームワークを使用しているのでなく、単純なJavaScriptアプリケーションにAuth0を追加しているものとします。

+

Auth0を使用すると、アプリケーションに手軽に認証を追加することができます。このガイドは、単純なJavaScriptを使用するシングルページアプリケーション(SPA)にAuth0 SPA SDKを使ってAuth0を統合し、認証の追加とユーザープロファイル情報の表示を行う方法について説明します。

このクイックスタートを使用するには、以下の手順に従います:

  • Auth0の無料アカウントにサインアップするか、Auth0にログインします。

  • 統合したいプロジェクトを用意します。または、ログインした後に、サンプルアプリケーションを表示してダウンロードすることもできます。

このクイックスタートでは、ReactやAngularなどのフレームワークを使用しているのでなく、単純なJavaScriptアプリケーションにAuth0を追加しているものとします。

## Auth0を構成する -

Auth0のサービスを利用するには、Auth0 Dashboadでセットアップしたアプリケーションが必要です。Auth0アプリケーションは、開発中のプロジェクトに対してどのように認証が動作して欲しいかを構成する場所です。

アプリケーションを構成する

対話型のセレクターを使ってAuth0アプリケーションを新規作成するか、統合したいプロジェクトを表す既存のアプリケーションを選択します。Auth0のすべてのアプリケーションには英数字からなる一意のクライアントIDが割り当てられており、アプリケーションのコードがSDKを通じてAuth0 APIを呼び出す際に使用されます。

このクイックスタートを使って構成されたすべての設定は、Dashboardのアプリケーションを自動更新します。今後、アプリケーションの管理もDashboardで行えます。

代わりに完了済みの構成を見てみたい場合は、サンプルアプリケーションをご覧ください。

Callback URLを構成する

Callback URLとは、Auth0がユーザーを認証後にリダイレクトするアプリケーション内URLです。設定されていない場合、ユーザーはログイン後にアプリケーションに戻りません。

サンプルプロジェクトに沿って進めている場合は、http://localhost:3000に設定してください。

ログアウトURLを構成する

ログアウトURLとは、Auth0がユーザーをログアウト後にリダイレクトするアプリケーション内URLです。設定されていない場合、ユーザーはアプリケーションからログアウトできず、エラーを受け取ります。

サンプルプロジェクトに沿って進めている場合は、http://localhost:3000に設定してください。

Allowed Web Origins(許可されているWebオリジン)を構成する

[Allowed Web Origin(許可されているWebオリジン)]とは、認証フローにアクセスすることを許可して欲しいURLです。これにはプロジェクトのURLが含まれている必要があります。適切に設定されていない場合、プロジェクトが認証トークンを暗黙でリフレッシュできず、ユーザーがアプリケーションを再び訪問した時、またはページを再読み込みした時にログアウトした状態になってしまいます。

サンプルプロジェクトに沿って進めている場合は、http://localhost:3000に設定してください。

+

Auth0のサービスを利用するには、Auth0 Dashboadでセットアップしたアプリケーションが必要です。Auth0アプリケーションは、開発中のプロジェクトに対してどのように認証が動作して欲しいかを構成する場所です。

アプリケーションを構成する

対話型のセレクターを使ってAuth0アプリケーションを新規作成するか、統合したいプロジェクトを表す既存のアプリケーションを選択します。Auth0のすべてのアプリケーションには英数字からなる一意のクライアントIDが割り当てられており、アプリケーションのコードがSDKを通じてAuth0 APIを呼び出す際に使用されます。

このクイックスタートを使って構成されたすべての設定は、Dashboardのアプリケーションを自動更新します。今後、アプリケーションの管理もDashboardで行えます。

代わりに完了済みの構成を見てみたい場合は、サンプルアプリケーションをご覧ください。

Callback URLを構成する

Callback URLとは、Auth0がユーザーを認証後にリダイレクトするアプリケーション内URLです。設定されていない場合、ユーザーはログイン後にアプリケーションに戻りません。

サンプルプロジェクトに沿って進めている場合は、http://localhost:3000に設定してください。

ログアウトURLを構成する

ログアウトURLとは、Auth0がユーザーをログアウト後にリダイレクトするアプリケーション内URLです。設定されていない場合、ユーザーはアプリケーションからログアウトできず、エラーを受け取ります。

サンプルプロジェクトに沿って進めている場合は、http://localhost:3000に設定してください。

Allowed Web Origins(許可されているWebオリジン)を構成する

[Allowed Web Origin(許可されているWebオリジン)]とは、認証フローにアクセスすることを許可して欲しいURLです。これにはプロジェクトのURLが含まれている必要があります。適切に設定されていない場合、プロジェクトが認証トークンを暗黙でリフレッシュできず、ユーザーがアプリケーションを再び訪問した時、またはページを再読み込みした時にログアウトした状態になってしまいます。

サンプルプロジェクトに沿って進めている場合は、http://localhost:3000に設定してください。

## Auth0 SPA SDKを追加する @@ -36,11 +36,11 @@ locale: ja-JP ## アプリケーションにログインを追加する {{{ data-action="code" data-code="app.js#8:14" }}} -

Auth0アプリケーションの構成、Auth0 SPA SDKの追加、Auth0クライアントの作成が完了したら、プロジェクトのためにログインをセットアップする必要があります。これを実現するには、SDKのloginWithRedirect()メソッドを使用して、ユーザーをAuth0のユニバーサルログインページにリダイレクトします。ここでAuth0はユーザーを認証することができます。ユーザーが認証に成功すると、このクイックスタートで前にセットアップしたCallback URLへリダイレクトされます。

アプリケーションで選択時にloginWithRedirect()を呼び出すログインボタンを作成します。

Javascriptクイックスタート手順4「チェックポイント」

アプリケーションにログインできるようになります。

アプリケーションを実行し、ログインボタンを選択します。以下の点を確認します:

  • ユーザー名とパスワードを使って、ログインまたはサインアップできる

  • アプリケーションによってAuth0ユニバーサルログインページにリダイレクトされる

  • 認証用にAuth0にリダイレクトされる

  • 認証した後、Auth0はユーザーをアプリケーションにリダイレクトで戻す

  • コンソールでAuth0に関連したエラーを受け取らない

+

Auth0アプリケーションの構成、Auth0 SPA SDKの追加、Auth0クライアントの作成が完了したら、プロジェクトのためにログインをセットアップする必要があります。これを実現するには、SDKのloginWithRedirect()メソッドを使用して、ユーザーをAuth0のユニバーサルログインページにリダイレクトします。ここでAuth0はユーザーを認証することができます。ユーザーが認証に成功すると、このクイックスタートで前にセットアップしたCallback URLへリダイレクトされます。

アプリケーションで選択時にloginWithRedirect()を呼び出すログインボタンを作成します。

Javascriptクイックスタート手順4「チェックポイント」

アプリケーションにログインできるようになります。

アプリケーションを実行し、ログインボタンを選択します。以下の点を確認します:

  • ユーザー名とパスワードを使って、ログインまたはサインアップできる

  • アプリケーションによってAuth0ユニバーサルログインページにリダイレクトされる

  • 認証用にAuth0にリダイレクトされる

  • 認証した後、Auth0はユーザーをアプリケーションにリダイレクトで戻す

  • コンソールでAuth0に関連したエラーを受け取らない

-

Sorry about that. Here are a few things to double check:

  • make sure that the correct application is selected

  • make sure you saved after entering your URLs

  • make sure the Auth0 client has been correctly configured with your Auth0 domain and client ID

Still having issues? To get more help, check out our documentation or visit our community page.

+

すみません。いくつかの点をもう一度確認してください。

  • 正しいアプリケーションが選択されていることを確認します

  • URLを入力した後で保存したことを確認します

  • Auth0クライアントがAuth0のドメインとクライアントIDで正しく構成されていることを確認します

まだお困りですか?当社提供のドキュメントまたはコミュニティページで詳しい情報を確認してください。

@@ -51,28 +51,28 @@ locale: ja-JP
-

Sorry about that. Here are a few things to double check:

  • check that the redirect_uri option has been configured to your application's URL

  • if you have an error query parameter, inspect it to learn the cause of the error

Still having issues? To get more help, check out our documentation or visit our community page.

+

すみません。いくつかの点をもう一度確認してください。

  • アプリケーションのURLにredirect_uriオプションが構成されていることを確認します

  • errorクエリパラメーターがある場合は、それを調べてエラーの原因を確認します

まだお困りですか?当社提供のドキュメントまたはコミュニティページで詳しい情報を確認してください。

## アプリケーションにログアウトを追加する {{{ data-action="code" data-code="app.js#23:29" }}} -

プロジェクトにログインしたユーザーには、ログアウトする方法も必要です。Auth0クライアントには、アプリからユーザーをログアウトするのに使用できるlogout()メソッドが用意されています。ユーザーはログアウトすると、Auth0ログアウトエンドポイントにリダイレクトされてから、即座に、アプリケーションとこのクイックスタートで先ほどセットアップしたログアウトURLへとリダイレクトで戻されます。

アプリケーションで選択時にlogout()を呼び出すログアウトボタンを作成します。

SDKによってisAuthenticated()関数が公開されることで、ユーザーが認証されているかどうかを確認することができます。isAuthenticated()関数の値に基づいて、条件付きでログインボタンとログアウトボタンを表示することができます。または、シングルボタンを使って、ログインとログアウトの両方のボタンと条件付きレンダリングを組み合わせることができます。

javascriptクイックスタート手順6「チェックポイント」

アプリケーションからログアウトできるようになります。

アプリケーションを実行し、ログインし、ログアウトボタンを選択します。以下の点を確認します:

  • Auth0のログアウトエンドポイントにリダイレクトされている。

  • Auth0がアプリケーションと正しいログアウトURLへのリダイレクトで戻される。

  • アプリケーションにログインしていない。

  • コンソールでAuth0に関連したエラーを受け取らない。

+

プロジェクトにログインしたユーザーには、ログアウトする方法も必要です。Auth0クライアントには、アプリからユーザーをログアウトするのに使用できるlogout()メソッドが用意されています。ユーザーはログアウトすると、Auth0ログアウトエンドポイントにリダイレクトされてから、即座に、アプリケーションとこのクイックスタートで先ほどセットアップしたログアウトURLへとリダイレクトで戻されます。

アプリケーションで選択時にlogout()を呼び出すログアウトボタンを作成します。

SDKによってisAuthenticated()関数が公開されることで、ユーザーが認証されているかどうかを確認することができます。isAuthenticated()関数の値に基づいて、条件付きでログインボタンとログアウトボタンを表示することができます。または、シングルボタンを使って、ログインとログアウトの両方のボタンと条件付きレンダリングを組み合わせることができます。

javascriptクイックスタート手順6「チェックポイント」

アプリケーションからログアウトできるようになります。

アプリケーションを実行し、ログインし、ログアウトボタンを選択します。以下の点を確認します:

  • Auth0のログアウトエンドポイントにリダイレクトされている。

  • Auth0がアプリケーションと正しいログアウトURLへのリダイレクトで戻される。

  • アプリケーションにログインしていない。

  • コンソールでAuth0に関連したエラーを受け取らない。

-

Sorry about that. Here are a few things to double check:

  • make sure that you configured the logout URL as one of the Allowed Logout URLS in your application's Settings

  • inspect the application logs for further errors

Still having issues? To get more help, check out our documentation or visit our community page.

+

すみません。いくつかの点をもう一度確認してください。

  • ログアウトURLが[Allowed Logout URLs(許可されているログアウトURL)]としてアプリケーションの[Settings(設定)]で構成されていることを確認します

  • アプリケーションログで他にもエラーがないかを調べます

まだお困りですか?当社提供のドキュメントまたはコミュニティページで詳しい情報を確認してください。

## ユーザープロファイル情報を表示する {{{ data-action="code" data-code="app.js#31:45" }}} -

ユーザーがログインやログアウトできるようになったら、認証済みのユーザーに関連付けられたプロファイル情報を取得できるようにしたいと考えるはずです。たとえば、ログインしたユーザーの名前やプロフィール写真を表示することで、ユーザーインターフェイスをパーソナライズできるようになりたいかもしれません。

Auth0 SPA SDKは、Auth0クライアントによって公開されたgetUser()関数を介してユーザー情報を提供します。Auth0クライアントは、ユーザーが認証されているかどうかを確認することができるisAuthenticated()関数も公開します。これを使って、たとえば、UI要素を表示・非表示にするかを判断することができます。インタラクティブパネルでコードを確認し、これらの関数の使用方法の例をチェックします。

Javascriptクイックスタート手順7「チェックポイント」

ユーザープロファイル情報を表示することができるようになります。

アプリケーションを実行して次の点を確認します:

  • ログイン後にユーザー情報が正しく表示される。

  • ログアウト後にユーザー情報が表示されない。

+

ユーザーがログインやログアウトできるようになったら、認証済みのユーザーに関連付けられたプロファイル情報を取得できるようにしたいと考えるはずです。たとえば、ログインしたユーザーの名前やプロフィール写真を表示することで、ユーザーインターフェイスをパーソナライズできるようになりたいかもしれません。

Auth0 SPA SDKは、Auth0クライアントによって公開されたgetUser()関数を介してユーザー情報を提供します。Auth0クライアントは、ユーザーが認証されているかどうかを確認することができるisAuthenticated()関数も公開します。これを使って、たとえば、UI要素を表示・非表示にするかを判断することができます。インタラクティブパネルでコードを確認し、これらの関数の使用方法の例をチェックします。

Javascriptクイックスタート手順7「チェックポイント」

ユーザープロファイル情報を表示することができるようになります。

アプリケーションを実行して次の点を確認します:

  • ログイン後にユーザー情報が正しく表示される。

  • ログアウト後にユーザー情報が表示されない。

-

Sorry about that. Here are a few things to double check:

  • ensure that all the previous steps work without issue

  • check your code that manages the UI in response to the authentication state

  • inspect the application logs for further errors relating to silent authentication

Still having issues? To get more help, check out our documentation or visit our community page.

+

すみません。いくつかの点をもう一度確認してください。

  • これまでの手順がすべて問題なく動作することを確認します

  • 認証状態に対する応答でUIを管理するコードを確認します

  • アプリケーションログでサイレント認証に関連のエラーが他にもないか調べます

まだお困りですか?当社提供のドキュメントまたはコミュニティページで詳しい情報を確認してください。

diff --git a/ja-jp/articles/quickstart/spa/vuejs/interactive.md b/ja-jp/articles/quickstart/spa/vuejs/interactive.md index d6b6ae9f1c..bd0d484ed9 100644 --- a/ja-jp/articles/quickstart/spa/vuejs/interactive.md +++ b/ja-jp/articles/quickstart/spa/vuejs/interactive.md @@ -8,34 +8,34 @@ files: - files/logout - files/profile github: - path: https://github.com/auth0-samples/auth0-vue-samples/tree/master/01-Login + path: 01-Login locale: ja-JP --- # Vueアプリケーションにログインを追加する -

Auth0を使用すると、アプリケーションに認証を追加することができます。このガイドは、VueアプリケーションにAuth0 Vue SDKを使ってAuth0を統合し、認証の追加とユーザープロファイル情報の表示を行う方法について説明します。

このクイックスタートは、Vue 3アプリケーションでAuth0 Vueを使用するために設計されています。Vue 2を使用している場合は、Auth0 SPA SDKを使ったVue 2チュートリアルを確認するか、「例を挙げて説明するVue.js認証2」ガイドを参照してください。

このクイックスタートを使用するには、以下の手順に従います:

  • Auth0の無料アカウントを使用するか、Auth0にサインアップします。

  • 統合する作業中のVueプロジェクト、または、ログインした後に、サンプルアプリケーションをダウンロードすることができます。

+

Auth0を使用すると、アプリケーションに認証を追加することができます。このガイドは、VueアプリケーションにAuth0 Vue SDKを使ってAuth0を統合し、認証の追加とユーザープロファイル情報の表示を行う方法について説明します。

このクイックスタートは、Vue 3アプリケーションでAuth0 Vueを使用するために設計されています。Vue 2を使用している場合は、Auth0 SPA SDKを使ったVue 2チュートリアルを確認するか、「例を挙げて説明するVue.js認証2」ガイドを参照してください。

このクイックスタートを使用するには、以下の手順に従います:

  • Auth0の無料アカウントを使用するか、Auth0にサインアップします。

  • 統合する作業中のVueプロジェクト、または、ログインした後に、サンプルアプリケーションをダウンロードすることができます。

## Auth0を構成する -

Auth0のサービスを利用するには、Auth0 Dashboadに設定済みのアプリケーションがある必要があります。Auth0アプリケーションは、開発中のプロジェクトに対してどのように認証が動作して欲しいかを構成する場所です。

アプリケーションを構成する

対話型のセレクターを使ってAuth0アプリケーションを新規作成するか、統合したいプロジェクトを表す既存のアプリケーションを選択します。Auth0のすべてのアプリケーションには英数字からなる一意のクライアントIDが割り当てられており、アプリケーションのコードがSDKを通じてAuth0 APIを呼び出す際に使用されます。

このクイックスタートを使って構成されたすべての設定は、Dashboardのアプリケーションを自動更新します。今後、アプリケーションの管理もDashboardで行えます。

代わりに完了済みの構成を見てみたい場合は、サンプルアプリケーションをご覧ください。

Callback URLを構成する

Callback URLとは、Auth0がユーザーを認証後にリダイレクトするアプリケーション内URLです。設定されていない場合、ユーザーはログイン後にアプリケーションに戻りません。

サンプルプロジェクトに沿って進めている場合は、http://localhost:3000に設定してください。

ログアウトURLを構成する

ログアウトURLとは、Auth0がユーザーをログアウト後にリダイレクトするアプリケーション内URLです。設定されていない場合、ユーザーはアプリケーションからログアウトできず、エラーを受け取ります。

サンプルプロジェクトに沿って進めている場合は、http://localhost:3000に設定してください。

Allowed Web Origins(許可されているWebオリジン)を構成する

[Allowed Web Origin(許可されているWebオリジン)]とは、認証フローにアクセスすることを許可して欲しいURLです。これにはプロジェクトのURLが含まれている必要があります。適切に設定されていない場合、プロジェクトが認証トークンを暗黙でリフレッシュできず、ユーザーがアプリケーションを再び訪問した時、またはページを再読み込みした時にログアウトした状態になってしまいます。

サンプルプロジェクトに沿って進めている場合は、http://localhost:3000に設定してください。

+

Auth0のサービスを利用するには、Auth0 Dashboadに設定済みのアプリケーションがある必要があります。Auth0アプリケーションは、開発中のプロジェクトに対してどのように認証が動作して欲しいかを構成する場所です。

アプリケーションを構成する

対話型のセレクターを使ってAuth0アプリケーションを新規作成するか、統合したいプロジェクトを表す既存のアプリケーションを選択します。Auth0のすべてのアプリケーションには英数字からなる一意のクライアントIDが割り当てられており、アプリケーションのコードがSDKを通じてAuth0 APIを呼び出す際に使用されます。

このクイックスタートを使って構成されたすべての設定は、Dashboardのアプリケーションを自動更新します。今後、アプリケーションの管理もDashboardで行えます。

代わりに完了済みの構成を見てみたい場合は、サンプルアプリケーションをご覧ください。

Callback URLを構成する

Callback URLとは、Auth0がユーザーを認証後にリダイレクトするアプリケーション内URLです。設定されていない場合、ユーザーはログイン後にアプリケーションに戻りません。

サンプルプロジェクトに沿って進めている場合は、http://localhost:3000に設定してください。

ログアウトURLを構成する

ログアウトURLとは、Auth0がユーザーをログアウト後にリダイレクトするアプリケーション内URLです。設定されていない場合、ユーザーはアプリケーションからログアウトできず、エラーを受け取ります。

サンプルプロジェクトに沿って進めている場合は、http://localhost:3000に設定してください。

Allowed Web Origins(許可されているWebオリジン)を構成する

[Allowed Web Origin(許可されているWebオリジン)]とは、認証フローにアクセスすることを許可して欲しいURLです。これにはプロジェクトのURLが含まれている必要があります。適切に設定されていない場合、プロジェクトが認証トークンを暗黙でリフレッシュできず、ユーザーがアプリケーションを再び訪問した時、またはページを再読み込みした時にログアウトした状態になってしまいます。

サンプルプロジェクトに沿って進めている場合は、http://localhost:3000に設定してください。

## Auth0 Vue SDKをインストールする {{{ data-action="code" data-code="index.js" }}} -

Vue 3アプリで、Auth0の認証・認可を手軽に実装できるように、Auth0はVue SDKを提供しています。

ターミナルで以下のコマンドを実行してAuth0 Vue SDKをインストールします:

cd <your-project-directory>
+

Vue 3アプリで、Auth0の認証・認可を手軽に実装できるように、Auth0はVue SDKを提供しています。

ターミナルで以下のコマンドを実行してAuth0 Vue SDKをインストールします:

cd <your-project-directory>
 
 npm install @auth0/auth0-vue
 
 
-

プラグインを登録する

SDKが機能するには、以下のプロパティを使ってVueアプリケーションでプラグインを登録する必要があります。

  • domain:Auth0テナントのドメインです。この値は、Auth0 Dashboardにあるアプリケーションの[Settings(設定)]の[Domain(ドメイン)]フィールドにあります。カスタムドメインを使用している場合は、この値をカスタムドメインの値に設定してください。

  • clientId:このクイックスタートで前にセットアップした、Auth0アプリケーションのIDです。Auth0 Dashboardにあるアプリケーションの[Settings(設定)]の[Client ID(クライアントID)]フィールドで確認してください。

  • authorizationParams.redirect_uri:ユーザー認証の後、Auth0にユーザーをリダイレクトして欲しいアプリケーション内URLです。このクイックスタートで前にセットアップしたCallback URLと呼応します。この値は、Auth0 Dashboardにあるアプリケーションの[Settings(設定)]の[Callback URLs(コールバックURL)]フィールドにあります。コードに入力した値と前にセットアップした値は必ず一致させてください。異なった場合はユーザーにエラーが表示されます。

プラグインは、provideapp.config.globalPropertiesの両方を使ってSDKを登録します。これによって、Composition APIOptions APIの両方が有効になります。

vueクイックスタート手順2「チェックポイント」

プラグインが構成されました。アプリケーションを実行して次の点を確認します:

  • SDKが正しく初期化している

  • アプリケーションがAuth0に関連したエラーを投入していない

+

プラグインを登録する

SDKが機能するには、以下のプロパティを使ってVueアプリケーションでプラグインを登録する必要があります。

  • domain:Auth0テナントのドメインです。この値は、Auth0 Dashboardにあるアプリケーションの[Settings(設定)]の[Domain(ドメイン)]フィールドにあります。カスタムドメインを使用している場合は、この値をカスタムドメインの値に設定してください。

  • clientId:このクイックスタートで前にセットアップした、Auth0アプリケーションのIDです。Auth0 Dashboardにあるアプリケーションの[Settings(設定)]の[Client ID(クライアントID)]フィールドで確認してください。

  • authorizationParams.redirect_uri:ユーザー認証の後、Auth0にユーザーをリダイレクトして欲しいアプリケーション内URLです。このクイックスタートで前にセットアップしたCallback URLと呼応します。この値は、Auth0 Dashboardにあるアプリケーションの[Settings(設定)]の[Callback URLs(コールバックURL)]フィールドにあります。コードに入力した値と前にセットアップした値は必ず一致させてください。異なった場合はユーザーにエラーが表示されます。

プラグインは、provideapp.config.globalPropertiesの両方を使ってSDKを登録します。これによって、Composition APIOptions APIの両方が有効になります。

vueクイックスタート手順2「チェックポイント」

プラグインが構成されました。アプリケーションを実行して次の点を確認します:

  • SDKが正しく初期化している

  • アプリケーションがAuth0に関連したエラーを投入していない

-

If your application did not start successfully:

  • Verify you selected the correct application

  • Save your changes after entering your URLs

  • Verify the domain and Client ID imported correctly

Still having issues? Check out our documentation or visit our community page to get more help.

+

アプリケーションが正常に起動しなかった場合は以下を行います。

  • 正しいアプリケーションが選択されていることを確認します

  • URLを入力した後で変更内容を保存します

  • ドメインとクライアントIDが正常にインポートされていることを確認します

まだお困りですか?当社提供のドキュメントまたはコミュニティページで詳しい情報を確認してください。

@@ -46,28 +46,28 @@ npm install @auth0/auth0-vue
-

If you were not able to log in using Auth0 Universal Login:

  • Verify you configured the correct authorizationParams.redirect_uri

  • Verify the domain and Client ID are set correctly

Still having issues? Check out our documentation or visit our community page to get more help.

+

Auth0のユニバーサルログインを使用してログインできない場合には以下を行います。

  • 正しいauthorizationParams.redirect_uriが構成されていることを確認します

  • ドメインとクライアントIDが正しく設定されていることを確認します

まだお困りですか?当社提供のドキュメントまたはコミュニティページで詳しい情報を確認してください。

## アプリケーションにログアウトを追加する {{{ data-action="code" data-code="logout.js" }}} -

プロジェクトにログインしたユーザーには、ログアウトする方法も必要です。ユーザーがログアウトすると、アプリケーションによってAuth0 logoutエンドポイントにリダイレクトされてから、指定されたlogoutParams.returnToパラメーターにリダイレクトされます。

useAuth0の返り値に表示されたlogout関数を使用します。これには、コンポーネントのsetup関数でアクセスすることができ、ユーザーをアプリケーションからログアウトします。

Options APIの使用

Options APIでは、thisアクセサを通じてグローバル$auth0プロパティからの同じlogoutメソッドを使用することができます。

vueクイックスタート手順4「チェックリスト」

アプリケーションを実行してログアウトボタンをクリックし、次の点を検証します:

  • VueアプリケーションによってlogoutParams.returnToアドレスにリダイレクトされる

  • アプリケーションにログインしていない

+

プロジェクトにログインしたユーザーには、ログアウトする方法も必要です。ユーザーがログアウトすると、アプリケーションによってAuth0 logoutエンドポイントにリダイレクトされてから、指定されたlogoutParams.returnToパラメーターにリダイレクトされます。

useAuth0の返り値に表示されたlogout関数を使用します。これには、コンポーネントのsetup関数でアクセスすることができ、ユーザーをアプリケーションからログアウトします。

Options APIの使用

Options APIでは、thisアクセサを通じてグローバル$auth0プロパティからの同じlogoutメソッドを使用することができます。

vueクイックスタート手順4「チェックリスト」

アプリケーションを実行してログアウトボタンをクリックし、次の点を検証します:

  • VueアプリケーションによってlogoutParams.returnToアドレスにリダイレクトされる

  • アプリケーションにログインしていない

-
+

ログアウトできない場合には以下を行います。

  • logoutを呼び出すときにlogoutParams.returnToの値が指定されていることを確認します

  • [Application Settings(アプリケーションの設定)]で[Allowed Logout URLs(許可されているログアウトURL)]にreturnTo値が含まれていることを確認します。

まだお困りですか?当社提供のドキュメントまたはコミュニティページで詳しい情報を確認してください。

## ユーザープロファイル情報を表示する {{{ data-action="code" data-code="profile.js" }}} -

次に、認証ユーザーに関連するプロファイル情報を取得する方法を構成します。たとえば、ログインしたユーザーの名前やプロフィール写真をプロジェクトに表示したいかもしれません。ユーザーが認証を行うと、SDKはユーザーのプロファイル情報を抽出し、メモリ内に保存します。アプリケーションは、リアクティブなuserプロパティを使ってユーザープロファイルにアクセスすることができます。このプロパティにアクセスするには、コンポーネントのsetup関数を確認し、userAuth0返り値を見つけます。

userプロパティには、ユーザーIDに関する機微な情報が含まれています。これは、ユーザーの認証ステータスに基づいてのみ利用できます。エラーを防ぐため、常に以下を行ってください:

  • Vueがuserプロパティを使用するコンポーネントを呼び出す前に、isAuthenticatedプロパティを使用してAuth0がユーザーを認証したかどうかを定義する。

  • isAuthenticatedプロパティにアクセスする前に、isLoadingがfalseであることをチェックして、SDKの読み込みが完了したことを確認する。

Options APIの使用

Options APIでは、アクセサthisを通じてグローバル$auth0プロパティからの同じリアクティブなuserisLoading、およびisAuthenticatedプロパティを使用します。

vue手順5「チェックポイント」

以下の点を確認します:

  • ログイン後、コンポーネント内のuserやその他のユーザープロパティをすべて正しく表示できる

+

次に、認証ユーザーに関連するプロファイル情報を取得する方法を構成します。たとえば、ログインしたユーザーの名前やプロフィール写真をプロジェクトに表示したいかもしれません。ユーザーが認証を行うと、SDKはユーザーのプロファイル情報を抽出し、メモリ内に保存します。アプリケーションは、リアクティブなuserプロパティを使ってユーザープロファイルにアクセスすることができます。このプロパティにアクセスするには、コンポーネントのsetup関数を確認し、userAuth0返り値を見つけます。

userプロパティには、ユーザーIDに関する機微な情報が含まれています。これは、ユーザーの認証ステータスに基づいてのみ利用できます。エラーを防ぐため、常に以下を行ってください:

  • Vueがuserプロパティを使用するコンポーネントを呼び出す前に、isAuthenticatedプロパティを使用してAuth0がユーザーを認証したかどうかを定義する。

  • isAuthenticatedプロパティにアクセスする前に、isLoadingがfalseであることをチェックして、SDKの読み込みが完了したことを確認する。

Options APIの使用

Options APIでは、アクセサthisを通じてグローバル$auth0プロパティからの同じリアクティブなuserisLoading、およびisAuthenticatedプロパティを使用します。

vue手順5「チェックポイント」

以下の点を確認します:

  • ログイン後、コンポーネント内のuserやその他のユーザープロパティをすべて正しく表示できる

-

If you are having issues with the user properties:

  • Verify you added the isLoading check before accessing the isAuthenticated property

  • Verify you added the isAuthenticated check before accessing the user property

Still having issues? Check out our documentation or visit our community page to get more help.

+

userプロパティで問題が発生している場合には以下を行います。

  • isAuthenticatedプロパティへのアクセス以前にisLoadingの確認が追加されていることを確認します

  • userプロパティへのアクセス以前にisAuthenticatedの確認が追加されていることを確認します

まだお困りですか?当社提供のドキュメントまたはコミュニティページで詳しい情報を確認してください。

diff --git a/ja-jp/articles/quickstart/webapp/apache/interactive.md b/ja-jp/articles/quickstart/webapp/apache/interactive.md index 7fae55b15a..722d3e90f4 100644 --- a/ja-jp/articles/quickstart/webapp/apache/interactive.md +++ b/ja-jp/articles/quickstart/webapp/apache/interactive.md @@ -4,8 +4,6 @@ description: このチュートリアルでは、Webアプリに認証と認可 interactive: true files: - files/auth_openidc -github: - path: https://github.com/zmartzone/mod_auth_openidc/releases locale: ja-JP --- @@ -17,7 +15,7 @@ locale: ja-JP ## mod_auth_openidcモジュールをインストールして有効にする -

まず、Apacheにmod_auth_openidcモジュールをインストールする必要があります。

GitHubからバイナリを取得して、OSにインストールすることができます。OSがバイナリのどれとも互換でない場合には、ソースからビルドすることができます。

モジュールをインストールしたら、a2enmodコマンドを実行して、Apacheで有効化します。詳細については、Ubuntu Manpageでの2enmodで次を参照してください:

a2enmod auth_openidc

Windowsについては、こちらのPowershellスクリプトを使用すると、システム上でa2enmodを動作させることができます。

+

まず、Apacheにmod_auth_openidcモジュールをインストールする必要があります。

GitHubからバイナリを取得して、OSにインストールすることができます。OSがバイナリのどれとも互換でない場合には、ソースからビルドすることができます。

モジュールをインストールしたら、a2enmodコマンドを実行して、Apacheで有効化します。詳細については、Ubuntu Manpageでの2enmodで次を参照してください:

a2enmod auth_openidc

Windowsについては、こちらのPowershellスクリプトを使用すると、システム上でa2enmodを動作させることができます。

## Auth0アカウント情報でモジュールを構成する {{{ data-action="code" data-code="auth_openidc.conf#1:12" }}} diff --git a/ja-jp/articles/quickstart/webapp/aspnet-core-blazor-server/interactive.md b/ja-jp/articles/quickstart/webapp/aspnet-core-blazor-server/interactive.md index e00b864dd9..3215b694cd 100644 --- a/ja-jp/articles/quickstart/webapp/aspnet-core-blazor-server/interactive.md +++ b/ja-jp/articles/quickstart/webapp/aspnet-core-blazor-server/interactive.md @@ -8,7 +8,7 @@ files: - files/Profile - files/Program github: - path: https://github.com/auth0-samples/auth0-aspnetcore-blazor-server-samples/tree/main/Quickstart/Sample + path: Quickstart/Sample locale: ja-JP --- @@ -20,12 +20,12 @@ locale: ja-JP ## Auth0を構成する -

Auth0のサービスを利用するには、Auth0 Dashboadに設定済みのアプリケーションがある必要があります。Auth0アプリケーションは、開発中のプロジェクトに対してどのように認証が動作して欲しいかを構成する場所です。

アプリケーションを構成する

対話型のセレクターを使ってAuth0アプリケーションを新規作成するか、統合したいプロジェクトを表す既存のアプリケーションを選択します。Auth0のすべてのアプリケーションには英数字からなる一意のクライアントIDが割り当てられており、アプリケーションのコードがSDKを通じてAuth0 APIを呼び出す際に使用されます。

このクイックスタートを使って構成されたすべての設定は、Dashboardのアプリケーションを自動更新します。今後、アプリケーションの管理もDashboardで行えます。

完了済みの構成を見てみたい場合は、サンプルアプリケーションをご覧ください。

Callback URLを構成する

Callback URLとは、Auth0がユーザーを認証後にリダイレクトするアプリケーション内URLです。設定されていない場合、ユーザーはログイン後にアプリケーションに戻りません。

サンプルプロジェクトに沿って進めている場合は、http://localhost:3000/callbackに設定してください。

ログアウトURLを構成する

ログアウトURLとは、Auth0がユーザーをログアウト後にリダイレクトするアプリケーション内URLです。設定されていない場合、ユーザーはアプリケーションからログアウトできず、エラーを受け取ります。

サンプルプロジェクトに沿って進めている場合は、http://localhost:3000に設定してください。

+

Auth0のサービスを利用するには、Auth0 Dashboadに設定済みのアプリケーションがある必要があります。Auth0アプリケーションは、開発中のプロジェクトに対してどのように認証が動作して欲しいかを構成する場所です。

アプリケーションを構成する

対話型のセレクターを使ってAuth0アプリケーションを新規作成するか、統合したいプロジェクトを表す既存のアプリケーションを選択します。Auth0のすべてのアプリケーションには英数字からなる一意のクライアントIDが割り当てられており、アプリケーションのコードがSDKを通じてAuth0 APIを呼び出す際に使用されます。

このクイックスタートを使って構成されたすべての設定は、Dashboardのアプリケーションを自動更新します。今後、アプリケーションの管理もDashboardで行えます。

完了済みの構成を見てみたい場合は、サンプルアプリケーションをご覧ください。

Callback URLを構成する

Callback URLとは、Auth0がユーザーを認証後にリダイレクトするアプリケーション内URLです。設定されていない場合、ユーザーはログイン後にアプリケーションに戻りません。

サンプルプロジェクトに沿って進めている場合は、http://localhost:3000/callbackに設定してください。

ログアウトURLを構成する

ログアウトURLとは、Auth0がユーザーをログアウト後にリダイレクトするアプリケーション内URLです。設定されていない場合、ユーザーはアプリケーションからログアウトできず、エラーを受け取ります。

サンプルプロジェクトに沿って進めている場合は、http://localhost:3000に設定してください。

## SDKをインストールして構成する {{{ data-action="code" data-code="Program.cs" }}} -

NuGetからインストールする

Auth0をBlazor Serverと統合するには、Auth0.AspNetCore.AuthenticationNuGetパッケージをアプリケーションにインストールすることでSDKを使用できます。

ミドルウェアを構成する

Blazor Serverアプリケーションで認証を可能にするには、SDKが提供するミドルウェアを使います。Program.csファイルに移動してbuilder.Services.AddAuth0WebAppAuthentication()を呼び出し、SDKのミドルウェアを登録します。

DomainClientIdは必ず構成してください。SDKがどのAuth0テナントとアプリケーションを使用すべきかを認識するために必要となるフィールドです。

認証と認可がProgram.csファイルで有効になったことを確認します。

+

NuGetからインストールする

Auth0をBlazor Serverと統合するには、Auth0.AspNetCore.AuthenticationNuGetパッケージをアプリケーションにインストールすることでSDKを使用できます。

ミドルウェアを構成する

Blazor Serverアプリケーションで認証を可能にするには、SDKが提供するミドルウェアを使います。Program.csファイルに移動してbuilder.Services.AddAuth0WebAppAuthentication()を呼び出し、SDKのミドルウェアを登録します。

DomainClientIdは必ず構成してください。SDKがどのAuth0テナントとアプリケーションを使用すべきかを認識するために必要となるフィールドです。

認証と認可がProgram.csファイルで有効になったことを確認します。

## ログイン {{{ data-action="code" data-code="Login.cshtml.cs" }}} @@ -34,7 +34,7 @@ locale: ja-JP
-

Sorry about that. Here's a couple things to double check:

  • make sure the correct application is selected

  • did you save after entering your URLs?

  • make sure the domain and client ID are configured correctly

Still having issues? Check out our documentation or visit our community page to get more help.

+

すみません。いくつかの点をもう一度確認してください。

  • 正しいアプリケーションが選択されていることを確認します

  • URLを入力した後で保存しましたか?

  • ドメインとクライアントIDが正しく構成されていることを確認します

まだお困りですか?当社提供のドキュメントまたはコミュニティページで詳しい情報を確認してください。

@@ -45,7 +45,7 @@ locale: ja-JP
-

Sorry about that. Here's a couple things to double check:

  • make sure the correct application is selected

  • did you save after entering your URLs?

  • make sure the domain and client ID are configured correctly

Still having issues? Check out our documentation or visit our community page to get more help.

+

すみません。いくつかの点をもう一度確認してください。

  • 正しいアプリケーションが選択されていることを確認します

  • URLを入力した後で保存しましたか?

  • ドメインとクライアントIDが正しく構成されていることを確認します

まだお困りですか?当社提供のドキュメントまたはコミュニティページで詳しい情報を確認してください。

@@ -56,6 +56,6 @@ locale: ja-JP
-

Sorry about that. Here's a couple things to double check:

  • make sure the correct application is selected

  • did you save after entering your URLs?

  • make sure the domain and client ID are configured correctly

Still having issues? Check out our documentation or visit our community page to get more help.

+

すみません。いくつかの点をもう一度確認してください。

  • 正しいアプリケーションが選択されていることを確認します

  • URLを入力した後で保存しましたか?

  • ドメインとクライアントIDが正しく構成されていることを確認します

まだお困りですか?当社提供のドキュメントまたはコミュニティページで詳しい情報を確認してください。

diff --git a/ja-jp/articles/quickstart/webapp/aspnet-core/interactive.md b/ja-jp/articles/quickstart/webapp/aspnet-core/interactive.md index 38b35b0620..c370d253b1 100644 --- a/ja-jp/articles/quickstart/webapp/aspnet-core/interactive.md +++ b/ja-jp/articles/quickstart/webapp/aspnet-core/interactive.md @@ -7,7 +7,7 @@ files: - files/appsettings - files/AccountController github: - path: https://github.com/auth0-samples/auth0-aspnetcore-mvc-samples/tree/master/Quickstart/Sample + path: Quickstart/Sample locale: ja-JP --- @@ -19,12 +19,12 @@ locale: ja-JP ## Auth0を構成する -

Auth0のサービスを利用するには、Auth0 Dashboadに設定済みのアプリケーションがある必要があります。Auth0アプリケーションは、開発中のプロジェクトに対してどのように認証が動作して欲しいかを構成する場所です。

アプリケーションを構成する

対話型のセレクターを使ってAuth0アプリケーションを新規作成するか、統合したいプロジェクトを表す既存のアプリケーションを選択します。Auth0のすべてのアプリケーションには英数字からなる一意のクライアントIDが割り当てられており、アプリケーションのコードがSDKを通じてAuth0 APIを呼び出す際に使用されます。

このクイックスタートを使って構成されたすべての設定は、Dashboardのアプリケーションを自動更新します。今後、アプリケーションの管理もDashboardで行えます。

完了済みの構成を見てみたい場合は、サンプルアプリケーションをご覧ください。

Callback URLを構成する

Callback URLとは、Auth0がユーザーを認証後にリダイレクトするアプリケーション内URLです。設定されていない場合、ユーザーはログイン後にアプリケーションに戻りません。

サンプルプロジェクトに沿って進めている場合は、http://localhost:3000/callbackに設定してください。

ログアウトURLを構成する

ログアウトURLとは、Auth0がユーザーをログアウト後にリダイレクトするアプリケーション内URLです。設定されていない場合、ユーザーはアプリケーションからログアウトできず、エラーを受け取ります。

サンプルプロジェクトに沿って進めている場合は、http://localhost:3000に設定してください。

+

Auth0のサービスを利用するには、Auth0 Dashboadに設定済みのアプリケーションがある必要があります。Auth0アプリケーションは、開発中のプロジェクトに対してどのように認証が動作して欲しいかを構成する場所です。

アプリケーションを構成する

対話型のセレクターを使ってAuth0アプリケーションを新規作成するか、統合したいプロジェクトを表す既存のアプリケーションを選択します。Auth0のすべてのアプリケーションには英数字からなる一意のクライアントIDが割り当てられており、アプリケーションのコードがSDKを通じてAuth0 APIを呼び出す際に使用されます。

このクイックスタートを使って構成されたすべての設定は、Dashboardのアプリケーションを自動更新します。今後、アプリケーションの管理もDashboardで行えます。

完了済みの構成を見てみたい場合は、サンプルアプリケーションをご覧ください。

Callback URLを構成する

Callback URLとは、Auth0がユーザーを認証後にリダイレクトするアプリケーション内URLです。設定されていない場合、ユーザーはログイン後にアプリケーションに戻りません。

サンプルプロジェクトに沿って進めている場合は、http://localhost:3000/callbackに設定してください。

ログアウトURLを構成する

ログアウトURLとは、Auth0がユーザーをログアウト後にリダイレクトするアプリケーション内URLです。設定されていない場合、ユーザーはアプリケーションからログアウトできず、エラーを受け取ります。

サンプルプロジェクトに沿って進めている場合は、http://localhost:3000に設定してください。

## SDKをインストールして構成する {{{ data-action="code" data-code="Program.cs" }}} -

Nugetからインストールする

Auth0をASP.NET Coreと統合するには、Auth0.AspNetCore.AuthenticationNugetパッケージをアプリケーションにインストールすることでSDKを使用できます。

ミドルウェアを構成する

ASP.NET Coreアプリケーションで認証を可能にするには、SDKが提供するミドルウェアを使います。Program.csファイルに移動してbuilder.Services.AddAuth0WebAppAuthentication()を呼び出し、SDKのミドルウェアを登録します。

DomainClientIdは必ず構成してください。SDKがどのAuth0テナントとアプリケーションを使用すべきかを認識するために必要となるフィールドです。

認証と認可がProgram.csファイルで有効になったことを確認します。

+

Nugetからインストールする

Auth0をASP.NET Coreと統合するには、Auth0.AspNetCore.AuthenticationNugetパッケージをアプリケーションにインストールすることでSDKを使用できます。

ミドルウェアを構成する

ASP.NET Coreアプリケーションで認証を可能にするには、SDKが提供するミドルウェアを使います。Program.csファイルに移動してbuilder.Services.AddAuth0WebAppAuthentication()を呼び出し、SDKのミドルウェアを登録します。

DomainClientIdは必ず構成してください。SDKがどのAuth0テナントとアプリケーションを使用すべきかを認識するために必要となるフィールドです。

認証と認可がProgram.csファイルで有効になったことを確認します。

## ログイン {{{ data-action="code" data-code="AccountController.cs" }}} @@ -33,7 +33,7 @@ locale: ja-JP
-

Sorry about that. Here's a couple things to double check:

  • make sure the correct application is selected

  • did you save after entering your URLs?

  • make sure the domain and client ID are configured correctly

Still having issues? Check out our documentation or visit our community page to get more help.

+

すみません。いくつかの点をもう一度確認してください。

  • 正しいアプリケーションが選択されていることを確認します

  • URLを入力した後で保存しましたか?

  • ドメインとクライアントIDが正しく構成されていることを確認します

まだお困りですか?当社提供のドキュメントまたはコミュニティページで詳しい情報を確認してください。

@@ -44,7 +44,7 @@ locale: ja-JP
-

Sorry about that. Here's a couple things to double check:

  • make sure the correct application is selected

  • did you save after entering your URLs?

  • make sure the domain and client ID are configured correctly

Still having issues? Check out our documentation or visit our community page to get more help.

+

すみません。いくつかの点をもう一度確認してください。

  • 正しいアプリケーションが選択されていることを確認します

  • URLを入力した後で保存しましたか?

  • ドメインとクライアントIDが正しく構成されていることを確認します

まだお困りですか?当社提供のドキュメントまたはコミュニティページで詳しい情報を確認してください。

@@ -55,6 +55,6 @@ locale: ja-JP
-

Sorry about that. Here's a couple things to double check:

  • make sure the correct application is selected

  • did you save after entering your URLs?

  • make sure the domain and client ID are configured correctly

Still having issues? Check out our documentation or visit our community page to get more help.

+

すみません。いくつかの点をもう一度確認してください。

  • 正しいアプリケーションが選択されていることを確認します

  • URLを入力した後で保存しましたか?

  • ドメインとクライアントIDが正しく構成されていることを確認します

まだお困りですか?当社提供のドキュメントまたはコミュニティページで詳しい情報を確認してください。

diff --git a/ja-jp/articles/quickstart/webapp/aspnet-owin/interactive.md b/ja-jp/articles/quickstart/webapp/aspnet-owin/interactive.md index a661051242..f925c83774 100644 --- a/ja-jp/articles/quickstart/webapp/aspnet-owin/interactive.md +++ b/ja-jp/articles/quickstart/webapp/aspnet-owin/interactive.md @@ -7,7 +7,7 @@ files: - files/Startup - files/AccountController github: - path: https://github.com/auth0-samples/auth0-aspnet-owin-mvc-samples/tree/master/Quickstart/Sample + path: Quickstart/Sample locale: ja-JP --- @@ -19,7 +19,7 @@ locale: ja-JP ## Auth0を構成する -

Auth0のサービスを利用するには、Auth0 Dashboadに設定済みのアプリケーションがある必要があります。Auth0アプリケーションは、開発中のプロジェクトに対してどのように認証が動作して欲しいかを構成する場所です。

アプリケーションを構成する

対話型のセレクターを使ってAuth0アプリケーションを新規作成するか、統合したいプロジェクトを表す既存のアプリケーションを選択します。Auth0のすべてのアプリケーションには英数字からなる一意のクライアントIDが割り当てられており、アプリケーションのコードがSDKを通じてAuth0 APIを呼び出す際に使用されます。

このクイックスタートを使って構成されたすべての設定は、Dashboardのアプリケーションを自動更新します。今後、アプリケーションの管理もDashboardで行えます。

完了済みの構成を見てみたい場合は、サンプルアプリケーションをご覧ください。

Callback URLを構成する

Callback URLとは、Auth0がユーザーを認証後にリダイレクトするアプリケーション内URLです。設定されていない場合、ユーザーはログイン後にアプリケーションに戻りません。

サンプルプロジェクトに沿って進めている場合は、http://localhost:3000/callbackに設定してください。

ログアウトURLを構成する

ログアウトURLとは、Auth0がユーザーをログアウト後にリダイレクトするアプリケーション内URLです。設定されていない場合、ユーザーはアプリケーションからログアウトできず、エラーを受け取ります。

サンプルプロジェクトに沿って進めている場合は、http://localhost:3000に設定してください。

+

Auth0のサービスを利用するには、Auth0 Dashboadに設定済みのアプリケーションがある必要があります。Auth0アプリケーションは、開発中のプロジェクトに対してどのように認証が動作して欲しいかを構成する場所です。

アプリケーションを構成する

対話型のセレクターを使ってAuth0アプリケーションを新規作成するか、統合したいプロジェクトを表す既存のアプリケーションを選択します。Auth0のすべてのアプリケーションには英数字からなる一意のクライアントIDが割り当てられており、アプリケーションのコードがSDKを通じてAuth0 APIを呼び出す際に使用されます。

このクイックスタートを使って構成されたすべての設定は、Dashboardのアプリケーションを自動更新します。今後、アプリケーションの管理もDashboardで行えます。

完了済みの構成を見てみたい場合は、サンプルアプリケーションをご覧ください。

Callback URLを構成する

Callback URLとは、Auth0がユーザーを認証後にリダイレクトするアプリケーション内URLです。設定されていない場合、ユーザーはログイン後にアプリケーションに戻りません。

サンプルプロジェクトに沿って進めている場合は、http://localhost:3000/callbackに設定してください。

ログアウトURLを構成する

ログアウトURLとは、Auth0がユーザーをログアウト後にリダイレクトするアプリケーション内URLです。設定されていない場合、ユーザーはアプリケーションからログアウトできず、エラーを受け取ります。

サンプルプロジェクトに沿って進めている場合は、http://localhost:3000に設定してください。

## プロジェクトを構成する {{{ data-action="code" data-code="Web.config" }}} @@ -30,7 +30,7 @@ Install-Package Microsoft.Owin.Security.Cookies
-

OWINクッキーミドルウェアとSystem.Webクッキーを同時に構成すると不具合が発生します。この問題の影響を抑えるには、詳細について「System.Web cookie integration issues(System.Webクッキーの統合不具合)」ドキュメントでご確認ください。

資格情報を構成する

SDKが適切に動作するためには、Web.configで次のプロパティを設定します:

  • auth0:Domain:Auth0テナントのドメインです。Auth0 Dashboardにあるアプリケーションの[Settings(設定)]の[Domain(ドメイン)]フィールドで確認できます。カスタムドメインを使用している場合は、この値をカスタムドメインの値に設定してください。

  • auth0:ClientId:Auth0 Dashboardで作成したAuth0アプリケーションのIDです。Auth0 Dashboardにあるアプリケーションの[Settings(設定)]の[Client ID(クライアントID)]フィールドで確認できます。

+

OWINクッキーミドルウェアとSystem.Webクッキーを同時に構成すると不具合が発生します。この問題の影響を抑えるには、詳細について「System.Web cookie integration issues(System.Webクッキーの統合不具合)」ドキュメントでご確認ください。

資格情報を構成する

SDKが適切に動作するためには、Web.configで次のプロパティを設定します:

  • auth0:Domain:Auth0テナントのドメインです。Auth0 Dashboardにあるアプリケーションの[Settings(設定)]の[Domain(ドメイン)]フィールドで確認できます。カスタムドメインを使用している場合は、この値をカスタムドメインの値に設定してください。

  • auth0:ClientId:Auth0 Dashboardで作成したAuth0アプリケーションのIDです。Auth0 Dashboardにあるアプリケーションの[Settings(設定)]の[Client ID(クライアントID)]フィールドで確認できます。

## ミドルウェアを構成する {{{ data-action="code" data-code="Startup.cs#18:74" }}} @@ -44,7 +44,7 @@ Install-Package Microsoft.Owin.Security.Cookies
-

Sorry about that. Here are a couple of things to double-check:

  • make sure the correct application is selected

  • did you save after entering your URLs?

  • make sure the domain and client ID are configured correctly

Still having issues? Check out our documentation or visit our community page to get more help.

+

すみません。いくつかの点をもう一度確認してください。

  • 正しいアプリケーションが選択されていることを確認します

  • URLを入力した後で保存しましたか?

  • ドメインとクライアントIDが正しく構成されていることを確認します

まだお困りですか?当社提供のドキュメントまたはコミュニティページで詳しい情報を確認してください。

@@ -55,7 +55,7 @@ Install-Package Microsoft.Owin.Security.Cookies
-

Sorry about that. Here are a couple of things to double-check:

  • make sure the correct application is selected

  • did you save after entering your URLs?

  • make sure the domain and client ID are configured correctly

Still having issues? Check out our documentation or visit our community page to get more help.

+

すみません。いくつかの点をもう一度確認してください。

  • 正しいアプリケーションが選択されていることを確認します

  • URLを入力した後で保存しましたか?

  • ドメインとクライアントIDが正しく構成されていることを確認します

まだお困りですか?当社提供のドキュメントまたはコミュニティページで詳しい情報を確認してください。

@@ -66,6 +66,6 @@ Install-Package Microsoft.Owin.Security.Cookies
-

Sorry about that. Here are a couple things to double-check:

  • make sure the correct application is selected

  • make sure the domain and client ID are configured correctly

  • Did you set openid profile email as the scope?

Still having issues? Check out our documentation or visit our community page to get more help.

+

すみません。いくつかの点をもう一度確認してください。

  • 正しいアプリケーションが選択されていることを確認します

  • ドメインとクライアントIDが正しく構成されていることを確認します

  • スコープとしてopenid profile emailを設定しましたか?

まだお困りですか?当社提供のドキュメントまたはコミュニティページで詳しい情報を確認してください。

diff --git a/ja-jp/articles/quickstart/webapp/django/interactive.md b/ja-jp/articles/quickstart/webapp/django/interactive.md index 9cca8afbb9..17801aa80a 100644 --- a/ja-jp/articles/quickstart/webapp/django/interactive.md +++ b/ja-jp/articles/quickstart/webapp/django/interactive.md @@ -8,19 +8,19 @@ files: - files/webappexample/urls - files/webappexample/views github: - path: https://github.com/auth0-samples/auth0-django-web-app/tree/master/01-Login + path: 01-Login locale: ja-JP --- # Djangoアプリケーションにログインを追加する -

Auth0を使用すると、アプリケーションに手軽に認証を追加して、ユーザープロファイル情報にアクセスすることができます。このガイドでは、Python DjangoアプリケーションにAuthlib SDKを使ってAuth0を統合する方法を説明します。

+

Auth0を使用すると、アプリケーションに手軽に認証を追加して、ユーザープロファイル情報にアクセスすることができます。このガイドでは、Python DjangoアプリケーションにAuthlib SDKを使ってAuth0を統合する方法を説明します。

## Auth0を構成する -

Auth0のサービスを利用するには、Auth0 Dashboadに設定済みのアプリケーションがある必要があります。Auth0アプリケーションは、開発中のプロジェクトに対してどのように認証が動作して欲しいかを構成する場所です。

アプリケーションを構成する

対話型のセレクターを使ってAuth0アプリケーションを新規作成するか、統合したいプロジェクトを表す既存のアプリケーションを選択します。Auth0のすべてのアプリケーションには英数字からなる一意のクライアントIDが割り当てられており、アプリケーションのコードがSDKを通じてAuth0 APIを呼び出す際に使用されます。

このクイックスタートを使って構成されたすべての設定は、Dashboardのアプリケーションを自動更新します。今後、アプリケーションの管理もDashboardで行えます。

完了済みの構成を見てみたい場合は、サンプルアプリケーションをご覧ください。

Callback URLを構成する

Callback URLとは、Auth0がユーザーを認証後にリダイレクトするアプリケーション内URLです。設定されていない場合、ユーザーはログイン後にアプリケーションに戻りません。

サンプルプロジェクトに沿って進めている場合は、http://localhost:3000/callbackに設定してください。

ログアウトURLを構成する

ログアウトURLとは、Auth0がユーザーをログアウト後にリダイレクトするアプリケーション内URLです。設定されていない場合、ユーザーはアプリケーションからログアウトできず、エラーを受け取ります。

サンプルプロジェクトに沿って進めている場合は、http://localhost:3000に設定してください。

+

Auth0のサービスを利用するには、Auth0 Dashboadに設定済みのアプリケーションがある必要があります。Auth0アプリケーションは、開発中のプロジェクトに対してどのように認証が動作して欲しいかを構成する場所です。

アプリケーションを構成する

対話型のセレクターを使ってAuth0アプリケーションを新規作成するか、統合したいプロジェクトを表す既存のアプリケーションを選択します。Auth0のすべてのアプリケーションには英数字からなる一意のクライアントIDが割り当てられており、アプリケーションのコードがSDKを通じてAuth0 APIを呼び出す際に使用されます。

このクイックスタートを使って構成されたすべての設定は、Dashboardのアプリケーションを自動更新します。今後、アプリケーションの管理もDashboardで行えます。

完了済みの構成を見てみたい場合は、サンプルアプリケーションをご覧ください。

Callback URLを構成する

Callback URLとは、Auth0がユーザーを認証後にリダイレクトするアプリケーション内URLです。設定されていない場合、ユーザーはログイン後にアプリケーションに戻りません。

サンプルプロジェクトに沿って進めている場合は、http://localhost:3000/callbackに設定してください。

ログアウトURLを構成する

ログアウトURLとは、Auth0がユーザーをログアウト後にリダイレクトするアプリケーション内URLです。設定されていない場合、ユーザーはアプリケーションからログアウトできず、エラーを受け取ります。

サンプルプロジェクトに沿って進めている場合は、http://localhost:3000に設定してください。

## 依存関係をインストールする @@ -63,7 +63,7 @@ AUTH0_DOMAIN=${account.namespace} ## アプリケーションをセットアップする {{{ data-action="code" data-code="webappexample/views.py#1:18" }}} -

アプリケーションの作成を始めるには、IDEでwebappexample/views.pyファイルを開きます。

アプリケーションに必要なすべてのライブラリーをインポートします。

Auth0でアプリケーションの認証を処理するために、Authlibを構成できるようになりました。

AuthlibのOAuthregister()メソッドで使用できる構成オプションの詳細については、Authlibのドキュメント

+

アプリケーションの作成を始めるには、IDEでwebappexample/views.pyファイルを開きます。

アプリケーションに必要なすべてのライブラリーをインポートします。

Auth0でアプリケーションの認証を処理するために、Authlibを構成できるようになりました。

AuthlibのOAuthregister()メソッドで使用できる構成オプションの詳細については、Authlibのドキュメント

## ルートハンドラーをセットアップする {{{ data-action="code" data-code="webappexample/views.py#20:52" }}} @@ -89,10 +89,10 @@ python3 manage.py runserver 3000
-

アプリケーションは、http://localhost:3000でブラウザーから開けるようになっています。

Django - 手順10 - アプリケーションを実行する - チェックポイント

http://localhost:3000を訪問して、確認します。ログインのためにAuth0へルートするログインボタンがあり、ログイン後アプリケーションに戻るとプロファイル情報を確認できます。

+

アプリケーションは、http://localhost:3000でブラウザーから開けるようになっています。

Django - 手順10 - アプリケーションを実行する - チェックポイント

http://localhost:3000を訪問して、確認します。ログインのためにAuth0へルートするログインボタンがあり、ログイン後アプリケーションに戻るとプロファイル情報を確認できます。

-

If your application did not start successfully:

  • Verify any errors in the console.

  • Verify the domain and Client ID imported correctly.

  • Verify your tenant configuration.

Still having issues? Check out our documentation or visit our community page to get more help.

+

アプリケーションが正常に起動しなかった場合は以下を行います。

  • コンソールでエラーを確認します。

  • ドメインとクライアントIDが正常にインポートされていることを確認します。

  • テナントの構成を確認します。

まだお困りですか?当社提供のドキュメントまたはコミュニティページで詳しい情報を確認してください。

diff --git a/ja-jp/articles/quickstart/webapp/express/interactive.md b/ja-jp/articles/quickstart/webapp/express/interactive.md index 08a7e5ae5f..dabe94ae1a 100644 --- a/ja-jp/articles/quickstart/webapp/express/interactive.md +++ b/ja-jp/articles/quickstart/webapp/express/interactive.md @@ -5,7 +5,7 @@ interactive: true files: - files/server github: - path: https://github.com/auth0-samples/auth0-express-webapp-sample/tree/master/01-Login + path: 01-Login locale: ja-JP --- @@ -17,32 +17,32 @@ locale: ja-JP ## Auth0を構成する -

Auth0のサービスを利用するには、Auth0 Dashboadに設定済みのアプリケーションがある必要があります。Auth0アプリケーションは、開発中のプロジェクトに対してどのように認証が動作して欲しいかを構成する場所です。

アプリケーションを構成する

対話型のセレクターを使ってAuth0アプリケーションを新規作成するか、統合したいプロジェクトを表す既存のアプリケーションを選択します。Auth0のすべてのアプリケーションには英数字からなる一意のクライアントIDが割り当てられており、アプリケーションのコードがSDKを通じてAuth0 APIを呼び出す際に使用されます。

このクイックスタートを使って構成されたすべての設定は、Dashboardのアプリケーションを自動更新します。今後、アプリケーションの管理もDashboardで行えます。

完了済みの構成を見てみたい場合は、サンプルアプリケーションをご覧ください。

Callback URLを構成する

Callback URLとは、Auth0がユーザーを認証後にリダイレクトするアプリケーション内URLです。設定されていない場合、ユーザーはログイン後にアプリケーションに戻りません。

サンプルプロジェクトに沿って進めている場合は、http://localhost:3000/callbackに設定してください。

ログアウトURLを構成する

ログアウトURLとは、Auth0がユーザーをログアウト後にリダイレクトするアプリケーション内URLです。設定されていない場合、ユーザーはアプリケーションからログアウトできず、エラーを受け取ります。

サンプルプロジェクトに沿って進めている場合は、http://localhost:3000/logoutに設定してください。

+

Auth0のサービスを利用するには、Auth0 Dashboadに設定済みのアプリケーションがある必要があります。Auth0アプリケーションは、開発中のプロジェクトに対してどのように認証が動作して欲しいかを構成する場所です。

アプリケーションを構成する

対話型のセレクターを使ってAuth0アプリケーションを新規作成するか、統合したいプロジェクトを表す既存のアプリケーションを選択します。Auth0のすべてのアプリケーションには英数字からなる一意のクライアントIDが割り当てられており、アプリケーションのコードがSDKを通じてAuth0 APIを呼び出す際に使用されます。

このクイックスタートを使って構成されたすべての設定は、Dashboardのアプリケーションを自動更新します。今後、アプリケーションの管理もDashboardで行えます。

完了済みの構成を見てみたい場合は、サンプルアプリケーションをご覧ください。

Callback URLを構成する

Callback URLとは、Auth0がユーザーを認証後にリダイレクトするアプリケーション内URLです。設定されていない場合、ユーザーはログイン後にアプリケーションに戻りません。

サンプルプロジェクトに沿って進めている場合は、http://localhost:3000/callbackに設定してください。

ログアウトURLを構成する

ログアウトURLとは、Auth0がユーザーをログアウト後にリダイレクトするアプリケーション内URLです。設定されていない場合、ユーザーはアプリケーションからログアウトできず、エラーを受け取ります。

サンプルプロジェクトに沿って進めている場合は、http://localhost:3000/logoutに設定してください。

## ExpressのOpenID Connect SDKをインストールする {{{ data-action="code" data-code="server.js#2:16" }}} -

アプリケーションには、Auth0がメンテナンスするOIDC準拠のExpress向けSDKであるexpress-openid-connectパッケージが必要です。

ターミナルで以下のコマンドを実行してExpress OpenID Connect SDKをインストールします:

cd <your-project-directory>
+

アプリケーションには、Auth0がメンテナンスするOIDC準拠のExpress向けSDKであるexpress-openid-connectパッケージが必要です。

ターミナルで以下のコマンドを実行してExpress OpenID Connect SDKをインストールします:

cd <your-project-directory>
 
 npm install express-openid-connect
 
 
-

ルーターを構成する

Express OpenID Connect SDKライブラリーは、認証ルートをアプリケーションに結びつけるために、authルーターを提供します。以下の構成キーでルーターを構成する必要があります:

  • authRequired - すべてのルートに対して認証が必要かを制御します。

  • auth0Logout - Auth0ログアウト機能を使います。

  • baseURL - アプリケーションが作動するURLです。

  • secret - 長くて無作為な文字列です。

  • issuerBaseURL - 安全なURLとしてのドメインで、アプリケーションの設定で確認できます。

  • clientID - アプリケーションの設定で確認できるクライアントIDです。

その他の構成オプションについては、APIドキュメントをご覧ください。

LONG_RANDOM_STRINGに適した文字列は、コマンドラインのopenssl rand -hex 32で生成できます。

Express - 手順2 - ExpressのOpenID Connect SDKをインストールする - チェックポイント

ユーザーはライブラリーによって提供された/loginルートを訪れることで、アプリケーションにログインできるようになりました。プロジェクトをlocalhost:3000で実行している場合のリンクは、http://localhost:3000/loginです。

+

ルーターを構成する

Express OpenID Connect SDKライブラリーは、認証ルートをアプリケーションに結びつけるために、authルーターを提供します。以下の構成キーでルーターを構成する必要があります:

  • authRequired - すべてのルートに対して認証が必要かを制御します。

  • auth0Logout - Auth0ログアウト機能を使います。

  • baseURL - アプリケーションが作動するURLです。

  • secret - 長くて無作為な文字列です。

  • issuerBaseURL - 安全なURLとしてのドメインで、アプリケーションの設定で確認できます。

  • clientID - アプリケーションの設定で確認できるクライアントIDです。

その他の構成オプションについては、APIドキュメントをご覧ください。

LONG_RANDOM_STRINGに適した文字列は、コマンドラインのopenssl rand -hex 32で生成できます。

Express - 手順2 - ExpressのOpenID Connect SDKをインストールする - チェックポイント

ユーザーはライブラリーによって提供された/loginルートを訪れることで、アプリケーションにログインできるようになりました。プロジェクトをlocalhost:3000で実行している場合のリンクは、http://localhost:3000/loginです。

-

Sorry about that. You should check the error details on the Auth0 login page to make sure you have entered the callback URL correctly.

Still having issues? Check out our documentation or visit our community page to get more help.

+

すみません。Auth0のログインページのエラー詳細を使って、正しいCallback URLが入力されていることを確認してください。

まだお困りですか?当社提供のドキュメントまたはコミュニティページで詳しい情報を確認してください。

## ユーザープロファイルを表示する {{{ data-action="code" data-code="server.js#25:28" }}} -

ユーザーのプロファイルを表示するには、アプリケーションに保護されたルートがなければなりません。

認証を必要とするルートにrequiresAuthミドルウェアを追加してください。このミドルウェアを使用するすべてのルートは有効なユーザーセッションをチェックし、ない場合にはユーザーをログインへリダイレクトします。

Express - 手順3 - ユーザープロファイルを表示する - チェックポイント

ユーザーはライブラリーによって提供された/logoutルートを訪れることで、アプリケーションからログアウトできます。プロジェクトをlocalhost:3000で実行している場合のリンクは、http://localhost:3000/logoutです。

+

ユーザーのプロファイルを表示するには、アプリケーションに保護されたルートがなければなりません。

認証を必要とするルートにrequiresAuthミドルウェアを追加してください。このミドルウェアを使用するすべてのルートは有効なユーザーセッションをチェックし、ない場合にはユーザーをログインへリダイレクトします。

Express - 手順3 - ユーザープロファイルを表示する - チェックポイント

ユーザーはライブラリーによって提供された/logoutルートを訪れることで、アプリケーションからログアウトできます。プロジェクトをlocalhost:3000で実行している場合のリンクは、http://localhost:3000/logoutです。

-

Sorry about that. You should check that you configured the logout URL correctly.

Still having issues? Check out our documentation or visit our community page to get more help.

+

すみません。ログアウトURLが正しく構成されていることを確認してください。

まだお困りですか?当社提供のドキュメントまたはコミュニティページで詳しい情報を確認してください。

diff --git a/ja-jp/articles/quickstart/webapp/golang/interactive.md b/ja-jp/articles/quickstart/webapp/golang/interactive.md index d8a09b4395..6351ddfe29 100644 --- a/ja-jp/articles/quickstart/webapp/golang/interactive.md +++ b/ja-jp/articles/quickstart/webapp/golang/interactive.md @@ -14,7 +14,7 @@ files: - files/router - files/user github: - path: https://github.com/auth0-samples/auth0-golang-web-app/tree/master/01-Login + path: 01-Login locale: ja-JP --- @@ -26,7 +26,7 @@ locale: ja-JP ## Auth0を構成する -

Auth0のサービスを利用するには、Auth0 Dashboadに設定済みのアプリケーションがある必要があります。Auth0アプリケーションは、開発中のプロジェクトに対してどのように認証が動作して欲しいかを構成する場所です。

アプリケーションを構成する

対話型のセレクターを使ってAuth0アプリケーションを新規作成するか、統合したいプロジェクトを表す既存のアプリケーションを選択します。Auth0のすべてのアプリケーションには英数字からなる一意のクライアントIDが割り当てられており、アプリケーションのコードがSDKを通じてAuth0 APIを呼び出す際に使用されます。

このクイックスタートを使って構成されたすべての設定は、Dashboardのアプリケーションを自動更新します。今後、アプリケーションの管理もDashboardで行えます。

完了済みの構成を見てみたい場合は、サンプルアプリケーションをご覧ください。

Callback URLを構成する

Callback URLとは、Auth0がユーザーを認証後にリダイレクトするアプリケーション内URLです。設定されていない場合、ユーザーはログイン後にアプリケーションに戻りません。

サンプルプロジェクトに沿って進めている場合は、http://localhost:3000/callbackに設定してください。

ログアウトURLを構成する

ログアウトURLとは、Auth0がユーザーをログアウト後にリダイレクトするアプリケーション内URLです。設定されていない場合、ユーザーはアプリケーションからログアウトできず、エラーを受け取ります。

サンプルプロジェクトに沿って進めている場合は、http://localhost:3000に設定してください。

+

Auth0のサービスを利用するには、Auth0 Dashboadに設定済みのアプリケーションがある必要があります。Auth0アプリケーションは、開発中のプロジェクトに対してどのように認証が動作して欲しいかを構成する場所です。

アプリケーションを構成する

対話型のセレクターを使ってAuth0アプリケーションを新規作成するか、統合したいプロジェクトを表す既存のアプリケーションを選択します。Auth0のすべてのアプリケーションには英数字からなる一意のクライアントIDが割り当てられており、アプリケーションのコードがSDKを通じてAuth0 APIを呼び出す際に使用されます。

このクイックスタートを使って構成されたすべての設定は、Dashboardのアプリケーションを自動更新します。今後、アプリケーションの管理もDashboardで行えます。

完了済みの構成を見てみたい場合は、サンプルアプリケーションをご覧ください。

Callback URLを構成する

Callback URLとは、Auth0がユーザーを認証後にリダイレクトするアプリケーション内URLです。設定されていない場合、ユーザーはログイン後にアプリケーションに戻りません。

サンプルプロジェクトに沿って進めている場合は、http://localhost:3000/callbackに設定してください。

ログアウトURLを構成する

ログアウトURLとは、Auth0がユーザーをログアウト後にリダイレクトするアプリケーション内URLです。設定されていない場合、ユーザーはアプリケーションからログアウトできず、エラーを受け取ります。

サンプルプロジェクトに沿って進めている場合は、http://localhost:3000に設定してください。

## 依存関係をインストールする {{{ data-action="code" data-code="go.mod" }}} @@ -41,12 +41,12 @@ locale: ja-JP ## OAuth2パッケージとOpenID Connectパッケージを構成する {{{ data-action="code" data-code="auth.go" }}} -

次にOAuth2パッケージとOpenID Connectパッケージを構成します。

platform/authenticatorフォルダーにauth.goという名前のファイルを作成します。このパッケージ内で、OAuth2クライアントとOIDCクライアントを構成してリターンするメソッドを作成し、IDトークンを検証するもう1つのメソッドを作成します。

+

次にOAuth2パッケージとOpenID Connectパッケージを構成します。

platform/authenticatorフォルダーにauth.goという名前のファイルを作成します。このパッケージ内で、OAuth2クライアントとOIDCクライアントを構成してリターンするメソッドを作成し、IDトークンを検証するもう1つのメソッドを作成します。

## アプリケーションルートをセットアップする {{{ data-action="code" data-code="router.go" }}} -

platform/routerフォルダーにrouter.goという名前のファイルを作成します。このパッケージで、github.com/gin-gonic/ginを使ってルートを構成、リターンするメソッドを作成します。loginハンドラーとcallbackハンドラーで使用するために、Authenticatorのインスタンスをメソッドに渡すことになります。

+

platform/routerフォルダーにrouter.goという名前のファイルを作成します。このパッケージで、github.com/gin-gonic/ginを使ってルートを構成、リターンするメソッドを作成します。loginハンドラーとcallbackハンドラーで使用するために、Authenticatorのインスタンスをメソッドに渡すことになります。

## アプリケーションにログインを追加する {{{ data-action="code" data-code="login.go" }}} @@ -66,7 +66,7 @@ locale: ja-JP ## アプリケーションにログアウトを追加する {{{ data-action="code" data-code="logout.go" }}} -

ユーザーをログアウトさせるには、セッションのデータを消去し、ユーザーをAuth0ログアウトエンドポイントにリダイレクトします。詳細はログアウトドキュメントをご覧ください。

web/app/logoutフォルダーにlogout.goという名前のファイルを作成し、ユーザーをAuth0ログアウトエンドポイントにリダイレクトするためにHandler関数を追加します。

returnTo URLは、アプリケーションの設定セクションで[Allowed Logout URLs(許可されているログアウトURL)]のリストに載っていなければなりません。詳細は「ログアウト後にユーザーをリダイレクトする」をご覧ください。

web/static/jsフォルダーにuser.jsという名前のファイルを作成し、ログインしたユーザーからクッキーを削除するためのコードを追加します。

+

ユーザーをログアウトさせるには、セッションのデータを消去し、ユーザーをAuth0ログアウトエンドポイントにリダイレクトします。詳細はログアウトドキュメントをご覧ください。

web/app/logoutフォルダーにlogout.goという名前のファイルを作成し、ユーザーをAuth0ログアウトエンドポイントにリダイレクトするためにHandler関数を追加します。

returnTo URLは、アプリケーションの設定セクションで[Allowed Logout URLs(許可されているログアウトURL)]のリストに載っていなければなりません。詳細は「ログアウト後にユーザーをリダイレクトする」をご覧ください。

web/static/jsフォルダーにuser.jsという名前のファイルを作成し、ログインしたユーザーからクッキーを削除するためのコードを追加します。

## ルートを保護する {{{ data-action="code" data-code="isAuthenticated.go" }}} diff --git a/ja-jp/articles/quickstart/webapp/java-ee/interactive.md b/ja-jp/articles/quickstart/webapp/java-ee/interactive.md index f917f536ef..dae032c796 100644 --- a/ja-jp/articles/quickstart/webapp/java-ee/interactive.md +++ b/ja-jp/articles/quickstart/webapp/java-ee/interactive.md @@ -9,7 +9,7 @@ files: - files/src/main/java/com/auth0/example/web/HomeServlet - files/src/main/java/com/auth0/example/web/LogoutServlet github: - path: https://github.com/auth0-samples/auth0-java-ee-sample/tree/master/01-Login + path: 01-Login locale: ja-JP --- @@ -21,12 +21,12 @@ locale: ja-JP ## Auth0を構成する -

アプリケーションキーを取得する

Auth0にサインアップしたときには、新しいアプリケーションが作成されたか、すでに作成済みであった可能性があります。Auth0と通信するには、アプリケーションについての詳細が必要になります。これらの詳細は、Auth0 Dashboardのアプリケーションの設定セクションで入手できます。

以下の情報が必要です。

  • Domain (ドメイン)

  • Client ID(クライアントID)

  • Client Secret(クライアントシークレット)

このページの上部からサンプルをダウンロードした場合は、これらの詳細が入力されます。

Callback URLを構成する

Callback URLはアプリケーション内にあるURLで、Auth0は認証後にユーザーをここにリダイレクトします。アプリのCallback URLはアプリケーションの設定にある[Allowed Callback URLs(許可されているコールバックURL)]フィールドに追加する必要があります。このフィールドが設定されていない場合、ユーザーはアプリケーションにログインできず、エラーが返されます。

このページの上部からダウンロードしたサンプルプロジェクトに沿って進めている場合には、[Allowed Callback URLs(許可されているコールバックURL)]フィールドにhttp://localhost:3000/callbackを追加する必要があります。

ログアウトURLを構成する

ログアウトURLはアプリケーション内にあるURLで、Auth0は認可サーバーからのログアウト後にユーザーをここに戻すことができます。これは、returnToクエリパラメーターで指定されます。アプリのログアウトURLはアプリケーションの設定にある[Allowed Logout URLs(許可されているログアウトURL)]フィールドに追加する必要があります。このフィールドが設定されていない場合、ユーザーはアプリケーションからログアウトできず、エラーが返されます。

このページの上部からダウンロードしたサンプルプロジェクトに沿って進めている場合には、[Allowed Logout URLs(許可されているログアウトURL)]フィールドにhttp://localhost:3000/を追加する必要があります。

+

アプリケーションキーを取得する

Auth0にサインアップしたときには、新しいアプリケーションが作成されたか、すでに作成済みであった可能性があります。Auth0と通信するには、アプリケーションについての詳細が必要になります。これらの詳細は、Auth0 Dashboardのアプリケーションの設定セクションで入手できます。

以下の情報が必要です。

  • Domain (ドメイン)

  • Client ID(クライアントID)

  • Client Secret(クライアントシークレット)

このページの上部からサンプルをダウンロードした場合は、これらの詳細が入力されます。

Callback URLを構成する

Callback URLはアプリケーション内にあるURLで、Auth0は認証後にユーザーをここにリダイレクトします。アプリのCallback URLはアプリケーションの設定にある[Allowed Callback URLs(許可されているコールバックURL)]フィールドに追加する必要があります。このフィールドが設定されていない場合、ユーザーはアプリケーションにログインできず、エラーが返されます。

このページの上部からダウンロードしたサンプルプロジェクトに沿って進めている場合には、[Allowed Callback URLs(許可されているコールバックURL)]フィールドにhttp://localhost:3000/callbackを追加する必要があります。

ログアウトURLを構成する

ログアウトURLはアプリケーション内にあるURLで、Auth0は認可サーバーからのログアウト後にユーザーをここに戻すことができます。これは、returnToクエリパラメーターで指定されます。アプリのログアウトURLはアプリケーションの設定にある[Allowed Logout URLs(許可されているログアウトURL)]フィールドに追加する必要があります。このフィールドが設定されていない場合、ユーザーはアプリケーションからログアウトできず、エラーが返されます。

このページの上部からダウンロードしたサンプルプロジェクトに沿って進めている場合には、[Allowed Logout URLs(許可されているログアウトURL)]フィールドにhttp://localhost:3000/を追加する必要があります。

## JavaEEにAuth0の使用を構成する {{{ data-action="code" data-code="src/main/webapp/WEB-INF/web.xml" }}} -

依存関係をセットアップする

Java EEアプリケーションをAuth0と統合するには、以下の依存関係を追加します。

  • javax.javaee-api:Java EE 8を使ってアプリケーションを作成するために必要なJava EE 8 APIです。実際の統合はアプリケーションコンテナーが提供するため、WARファイルに含める必要はありません。

  • javax.security.enterprise:EEアプリケーションでセキュリティ上の懸念に対処できるようにするJava EE 8 Security APIです。javax.javaee-apiの依存関係と同様に、統合はアプリケーションコンテナーが提供するため、WARファイルには含まれません。

  • auth0-java-mvc-commonsAuth0 Java MVC SDKは、サーバー側のMVC WebアプリケーションにAuth0とJavaを使用できるようにします。これは、アプリケーションがAuth0を使ったユーザー認証で呼び出すべき認可URLを生成します。

Mavenを使用している場合は、次の依存関係をpom.xmlに追加します:

<!-- pom.xml -->
+

依存関係をセットアップする

Java EEアプリケーションをAuth0と統合するには、以下の依存関係を追加します。

  • javax.javaee-api:Java EE 8を使ってアプリケーションを作成するために必要なJava EE 8 APIです。実際の統合はアプリケーションコンテナーが提供するため、WARファイルに含める必要はありません。

  • javax.security.enterprise:EEアプリケーションでセキュリティ上の懸念に対処できるようにするJava EE 8 Security APIです。javax.javaee-apiの依存関係と同様に、統合はアプリケーションコンテナーが提供するため、WARファイルには含まれません。

  • auth0-java-mvc-commonsAuth0 Java MVC SDKは、サーバー側のMVC WebアプリケーションにAuth0とJavaを使用できるようにします。これは、アプリケーションがAuth0を使ったユーザー認証で呼び出すべき認可URLを生成します。

Mavenを使用している場合は、次の依存関係をpom.xmlに追加します:

<!-- pom.xml -->
 
 <dependency>
 
@@ -76,7 +76,7 @@ implementation 'com.auth0:mvc-auth-commons:1. '
 
 
-

Java EEアプリケーションを構成する

このチュートリアルに付属のサンプルはJSPを使用して作成され、WildFlyアプリケーションサーバーでテストが完了しています。他のアプリケーションコンテナーや技術を使用して作業する場合には、一部の手順を調整する必要があるかもしれません。

Java EEアプリケーションは、Auth0アプリケーションを使ってユーザーを認証するために、いくつかの情報を必要とします。この情報の保管にはデプロイメント記述子であるweb.xmlファイルを使用できますが、別の安全な場所に保管することもできます。

この情報は、ユーザーがアプリケーションにログインできるように、auth0-java-mvc-commonsライブラリーを構成するために使用されます。ライブラリーとその構成オプションについては、ライブラリーのREADMEを参照してください。

+

Java EEアプリケーションを構成する

このチュートリアルに付属のサンプルはJSPを使用して作成され、WildFlyアプリケーションサーバーでテストが完了しています。他のアプリケーションコンテナーや技術を使用して作業する場合には、一部の手順を調整する必要があるかもしれません。

Java EEアプリケーションは、Auth0アプリケーションを使ってユーザーを認証するために、いくつかの情報を必要とします。この情報の保管にはデプロイメント記述子であるweb.xmlファイルを使用できますが、別の安全な場所に保管することもできます。

この情報は、ユーザーがアプリケーションにログインできるように、auth0-java-mvc-commonsライブラリーを構成するために使用されます。ライブラリーとその構成オプションについては、ライブラリーのREADMEを参照してください。

@@ -101,7 +101,7 @@ implementation 'com.auth0:mvc-auth-commons:1. ' ## Java EE Securityを構成する {{{ data-action="code" data-code="src/main/java/com/auth0/example/security/Auth0AuthenticationConfig.java" }}} -

Java EE 8 Security APIには新たにHttpAuthenticationMechanismインターフェイスが搭載され、アプリケーションがユーザーの資格情報を取得できるようにしています。Basic認証とフォームベースの認証にはデフォルトの実装があり、カスタム認証ストラテジーを構成しやすくしています。

Auth0を使用して認証するには、以下のインターフェイスをカスタムで実装します。

  • HttpAuthenticationMechanism:Auth0から戻されるユーザーの認証ワークフローを処理します(JavaDoc)。

  • IdentityStore:ユーザーの資格情報を検証します(JavaDoc)。

  • CallerPrincipal:現在のHTTP要求の呼び出し元プリンシパルを表します(JavaDoc)。

  • Credential:呼び出し元が認証に使用する資格情報を表します(JavaDoc)。

まず、アプリケーションがAuth0設定を使用できるように、@ApplicationScoped Beanを作成してWebコンテキストから値を取得し、getterを通して利用できるようにします。

次に、現在の要求の呼び出し元を表すカスタムのCallerPrincipalを作成します:

// src/main/java/com/auth0/example/security/Auth0JwtPrincipal.java
+

Java EE 8 Security APIには新たにHttpAuthenticationMechanismインターフェイスが搭載され、アプリケーションがユーザーの資格情報を取得できるようにしています。Basic認証とフォームベースの認証にはデフォルトの実装があり、カスタム認証ストラテジーを構成しやすくしています。

Auth0を使用して認証するには、以下のインターフェイスをカスタムで実装します。

  • HttpAuthenticationMechanism:Auth0から戻されるユーザーの認証ワークフローを処理します(JavaDoc)。

  • IdentityStore:ユーザーの資格情報を検証します(JavaDoc)。

  • CallerPrincipal:現在のHTTP要求の呼び出し元プリンシパルを表します(JavaDoc)。

  • Credential:呼び出し元が認証に使用する資格情報を表します(JavaDoc)。

まず、アプリケーションがAuth0設定を使用できるように、@ApplicationScoped Beanを作成してWebコンテキストから値を取得し、getterを通して利用できるようにします。

次に、現在の要求の呼び出し元を表すカスタムのCallerPrincipalを作成します:

// src/main/java/com/auth0/example/security/Auth0JwtPrincipal.java
 
 
 
@@ -161,7 +161,7 @@ class Auth0JwtCredential implements Credential {
 
 
-

これで、呼び出し元プリンシパルと資格情報を表すクラスが定義できました。次に、IdentityStoreのカスタム実装を作成します。このクラスはユーザー資格情報の検証に使用されます。

// src/main/java/com/auth0/example/security/Auth0JwtIdentityStore.java
+

これで、呼び出し元プリンシパルと資格情報を表すクラスが定義できました。次に、IdentityStoreのカスタム実装を作成します。このクラスはユーザー資格情報の検証に使用されます。

// src/main/java/com/auth0/example/security/Auth0JwtIdentityStore.java
 
 
 
@@ -193,7 +193,7 @@ public class Auth0JwtIdentityStore implements IdentityStore {
 
 
-

credentialAuth0Credentialの場合はユーザーの呼び出しが認証され有効であるため、正常として、資格情報を使って作成されたCredentialValidationResultが返されます。Auth0Credentialでない場合には、CredentialValidationResult.NOT_VALIDATED_RESULTが返されます。

これらのすべてを使用するHttpAuthenticationMechanismインターフェイスを実装する前に、Beanを作成して、Auth0 Java MVC SDKにある構成済みのAuthenticationControllerインスタンスが提供されるようにします。AuthenticationControllerはユーザーがログインする認可URLの構築と、ユーザーを認証するトークン交換の処理に使用されます。

  • Auth0アプリケーションにRS256署名アルゴリズム(新しいAuth0アプリケーション作成時のデフォルト)の使用が構成されている場合には、JwkProviderを構成して、トークン署名の検証に使われる公開鍵を取得するようにします。その他の構成オプションについては、jwks-rsa-javaレポジトリを参照してください。

  • Auth0アプリケーションにHS256署名アルゴリズムの使用が構成されている場合には、JwkProviderを構成する必要はありません。

使用可能な署名アルゴリズムについては、こちらのドキュメントを参照してください。

以下のサンプルは、RS256署名アルゴリズムの使用にAuthenticationControllerをどのように構成するのかを示しています。

// src/main/java/com/auth0/example/security/Auth0AuthenticationProvider.java
+

credentialAuth0Credentialの場合はユーザーの呼び出しが認証され有効であるため、正常として、資格情報を使って作成されたCredentialValidationResultが返されます。Auth0Credentialでない場合には、CredentialValidationResult.NOT_VALIDATED_RESULTが返されます。

これらのすべてを使用するHttpAuthenticationMechanismインターフェイスを実装する前に、Beanを作成して、Auth0 Java MVC SDKにある構成済みのAuthenticationControllerインスタンスが提供されるようにします。AuthenticationControllerはユーザーがログインする認可URLの構築と、ユーザーを認証するトークン交換の処理に使用されます。

  • Auth0アプリケーションにRS256署名アルゴリズム(新しいAuth0アプリケーション作成時のデフォルト)の使用が構成されている場合には、JwkProviderを構成して、トークン署名の検証に使われる公開鍵を取得するようにします。その他の構成オプションについては、jwks-rsa-javaレポジトリを参照してください。

  • Auth0アプリケーションにHS256署名アルゴリズムの使用が構成されている場合には、JwkProviderを構成する必要はありません。

使用可能な署名アルゴリズムについては、こちらのドキュメントを参照してください。

以下のサンプルは、RS256署名アルゴリズムの使用にAuthenticationControllerをどのように構成するのかを示しています。

// src/main/java/com/auth0/example/security/Auth0AuthenticationProvider.java
 
 
 
@@ -297,12 +297,12 @@ public class Auth0AuthenticationMechanism implements HttpAuthenticationMechanism
 
 
-

このクラスはvalidateRequestメソッドをオーバーライドします。このメソッドはAuth0アプリケーションに対するすべての要求で呼び出され、コンテナーに認証ステータスを通知します。

このサンプルでは、認可コードフローを使用して、認証フロー中に認可コードをトークンと交換します。この要求が/callbackエンドポイントに対するもので、code要求パラメーターが含まれている場合には、以下にあるいくつかの重要な処理を行います。

  • AuthenticationControllerhandleメソッドを呼び出して、認可コードをIDトークンおよびアクセストークンと交換する。

  • IDトークンを使用して、新たにAuth0Credentialを作成する。

  • カスタムのIdentityStore実装のvalidateメソッドを呼び出して、検証結果を取得する。

  • アプリケーションコンテナーにログインステータスを通知する。

要求されたリソースが/callbackでない場合には、httpMessageContext.doNothing()を返して、要求の処理が続行できるようにします。後ほど、認証のトリガーやWebビューの表示で認証情報をどのように使用するかについて説明します。

最後に、認証したユーザーのセッションをコンテナーが作成できるように、@AutoApplySessionアノテーションが追加されたことに注意してください。

+

このクラスはvalidateRequestメソッドをオーバーライドします。このメソッドはAuth0アプリケーションに対するすべての要求で呼び出され、コンテナーに認証ステータスを通知します。

このサンプルでは、認可コードフローを使用して、認証フロー中に認可コードをトークンと交換します。この要求が/callbackエンドポイントに対するもので、code要求パラメーターが含まれている場合には、以下にあるいくつかの重要な処理を行います。

  • AuthenticationControllerhandleメソッドを呼び出して、認可コードをIDトークンおよびアクセストークンと交換する。

  • IDトークンを使用して、新たにAuth0Credentialを作成する。

  • カスタムのIdentityStore実装のvalidateメソッドを呼び出して、検証結果を取得する。

  • アプリケーションコンテナーにログインステータスを通知する。

要求されたリソースが/callbackでない場合には、httpMessageContext.doNothing()を返して、要求の処理が続行できるようにします。後ほど、認証のトリガーやWebビューの表示で認証情報をどのように使用するかについて説明します。

最後に、認証したユーザーのセッションをコンテナーが作成できるように、@AutoApplySessionアノテーションが追加されたことに注意してください。

## 認証をトリガーする {{{ data-action="code" data-code="src/main/java/com/auth0/example/web/LoginServlet.java" }}} -

ユーザーがログインできるようにするには、/loginパスへの要求を処理するサーブレットを作成します。

LoginControllerは、ユーザーがAuth0で認証できるように、正しい認可URLに要求をリダイレクトします。正しい認可URLの構築には、Auth0AuthenticationConfigを通して投入された構成値と、Auth0 Java MVC SDKが提供するAuthenticationControllerが使用されます。このサンプルはデフォルトでopenid profile emailスコープを要求して、アプリケーションが基本的なプロファイル情報を認証済みのユーザーから取得できるようにします。これらのスコープについては、OpenID Connectスコープのドキュメントをお読みください。

ユーザーが資格情報を入力し、要求されたアクセス権を認可すると、Auth0はcallbackUrlに対して要求を発行し、IDトークンおよびアクセストークンと交換できるcodeクエリパラメーターを含めます。先ほど説明したように、上記で作成したAuth0HttpAuthenticationMechanismがこの交換を処理し、アプリケーションコンテナーに認証ステータスを通知できるようにします。そうすることで、/callbackパスへの要求を処理するサーブレットは、ログイン前に要求された元のリソースに要求を転送するか、ホームページにリダイレクトするだけで済みます。

// src/main/com/auth0/example/web/CallbackServlet.java
+

ユーザーがログインできるようにするには、/loginパスへの要求を処理するサーブレットを作成します。

LoginControllerは、ユーザーがAuth0で認証できるように、正しい認可URLに要求をリダイレクトします。正しい認可URLの構築には、Auth0AuthenticationConfigを通して投入された構成値と、Auth0 Java MVC SDKが提供するAuthenticationControllerが使用されます。このサンプルはデフォルトでopenid profile emailスコープを要求して、アプリケーションが基本的なプロファイル情報を認証済みのユーザーから取得できるようにします。これらのスコープについては、OpenID Connectスコープのドキュメントをお読みください。

ユーザーが資格情報を入力し、要求されたアクセス権を認可すると、Auth0はcallbackUrlに対して要求を発行し、IDトークンおよびアクセストークンと交換できるcodeクエリパラメーターを含めます。先ほど説明したように、上記で作成したAuth0HttpAuthenticationMechanismがこの交換を処理し、アプリケーションコンテナーに認証ステータスを通知できるようにします。そうすることで、/callbackパスへの要求を処理するサーブレットは、ログイン前に要求された元のリソースに要求を転送するか、ホームページにリダイレクトするだけで済みます。

// src/main/com/auth0/example/web/CallbackServlet.java
 
 
 
@@ -335,7 +335,7 @@ public class CallbackServlet extends HttpServlet {
 ## ユーザー情報を表示する {{{ data-action="code" data-code="src/main/java/com/auth0/example/web/HomeServlet.java" }}}
 
 
-

認証したユーザーのプロファイル情報を取得するには、Auth0JwtPrincipalを使用することができます。HomeServlet.javaのサンプルコードでは、IDトークンでクレームを使ってプロファイルデータを要求属性に設定する方法を例示しています。

そのプロファイル情報は、ユーザーについての情報を表示するビューで使用できます。

<!-- src/main/webapp/WEB-INF/jsp/fragments/navbar.jspf -->
+

認証したユーザーのプロファイル情報を取得するには、Auth0JwtPrincipalを使用することができます。HomeServlet.javaのサンプルコードでは、IDトークンでクレームを使ってプロファイルデータを要求属性に設定する方法を例示しています。

そのプロファイル情報は、ユーザーについての情報を表示するビューで使用できます。

<!-- src/main/webapp/WEB-INF/jsp/fragments/navbar.jspf -->
 
 
 
@@ -397,7 +397,7 @@ public class CallbackServlet extends HttpServlet {
 ## サンプルを実行する
 
 
-

サンプルを構築し実行するには、Mavenゴールに対してwildfly:runを実行し、このアプリケーションをデプロイした組み込みのWildFlyアプリケーションサーバーを起動します。詳細については、WildFly Maven Pluginのドキュメントを参照してください。

LinuxまたはMacOSを使用している場合は、次を行います:

./mvnw clean wildfly:run
+

サンプルを構築し実行するには、Mavenゴールに対してwildfly:runを実行し、このアプリケーションをデプロイした組み込みのWildFlyアプリケーションサーバーを起動します。詳細については、WildFly Maven Pluginのドキュメントを参照してください。

LinuxまたはMacOSを使用している場合は、次を行います:

./mvnw clean wildfly:run
 
 
diff --git a/ja-jp/articles/quickstart/webapp/java-spring-boot/interactive.md b/ja-jp/articles/quickstart/webapp/java-spring-boot/interactive.md index 15b40bb1aa..9853ab4887 100644 --- a/ja-jp/articles/quickstart/webapp/java-spring-boot/interactive.md +++ b/ja-jp/articles/quickstart/webapp/java-spring-boot/interactive.md @@ -9,24 +9,24 @@ files: - files/HomeController - files/SecurityConfigWithLogout github: - path: https://github.com/auth0-samples/auth0-spring-boot-login-samples/tree/master/mvc-login + path: mvc-login locale: ja-JP --- # Spring Webアプリケーションにログインを追加する -

Spring WebFluxを使用する?

このチュートリアルではSpring MVCを使用します。Spring WebFluxを使用している場合、認証を追加する手順は似ていますが、実装の詳細は一部異なります。Spring Boot WebFluxサンプルコードで、Auth0とSpring Boot WebFluxアプリケーションの統合方法を確認してください。

+

Spring WebFluxを使用する?

このチュートリアルではSpring MVCを使用します。Spring WebFluxを使用している場合、認証を追加する手順は似ていますが、実装の詳細は一部異なります。Spring Boot WebFluxサンプルコードで、Auth0とSpring Boot WebFluxアプリケーションの統合方法を確認してください。

## Auth0を構成する -

Auth0のサービスを利用するには、Auth0 Dashboadでセットアップしたアプリケーションが必要です。Auth0アプリケーションは、開発中のプロジェクトに対してどのように認証が動作して欲しいかを構成する場所です。

アプリケーションを構成する

インタラクティブセレクターを使ってAuth0アプリケーションを新規作成するか、統合したいプロジェクトを表す既存のアプリケーションを選択します。Auth0の全てのアプリケーションには英数字からなる一意のクライアントIDが割り当てられており、アプリケーションのコードがSDKを通じてAuth0 APIを呼び出す際に使用されます。

このクイックスタートを使って構成されたすべての設定は、Dashboardのアプリケーションに自動更新を行います。今後、アプリケーションの管理はDashboardで行えます。

代わりに完了済みの構成を見てみたい場合は、サンプルアプリケーションをご覧ください。

Callback URLを構成する

Callback URLとは、Auth0がユーザーを認証後にリダイレクトするアプリケーション内URLです。設定されていない場合、ユーザーはログイン後にアプリケーションに戻りません。

サンプルプロジェクトに沿って進めている場合には、次の値に設定します:

http://localhost:3000/login/oauth2/code/okta

ログアウトURLを構成する

ログアウトURLとは、Auth0がユーザーをログアウト後にリダイレクトするアプリケーション内URLです。設定されていない場合、ユーザーはアプリケーションからログアウトできず、エラーを受け取ります。

サンプルプロジェクトに沿って進めている場合には、次の値に設定します:

http://localhost:3000

+

Auth0のサービスを利用するには、Auth0 Dashboadでセットアップしたアプリケーションが必要です。Auth0アプリケーションは、開発中のプロジェクトに対してどのように認証が動作して欲しいかを構成する場所です。

アプリケーションを構成する

インタラクティブセレクターを使ってAuth0アプリケーションを新規作成するか、統合したいプロジェクトを表す既存のアプリケーションを選択します。Auth0の全てのアプリケーションには英数字からなる一意のクライアントIDが割り当てられており、アプリケーションのコードがSDKを通じてAuth0 APIを呼び出す際に使用されます。

このクイックスタートを使って構成されたすべての設定は、Dashboardのアプリケーションに自動更新を行います。今後、アプリケーションの管理はDashboardで行えます。

代わりに完了済みの構成を見てみたい場合は、サンプルアプリケーションをご覧ください。

Callback URLを構成する

Callback URLとは、Auth0がユーザーを認証後にリダイレクトするアプリケーション内URLです。設定されていない場合、ユーザーはログイン後にアプリケーションに戻りません。

サンプルプロジェクトに沿って進めている場合には、次の値に設定します:

http://localhost:3000/login/oauth2/code/okta

ログアウトURLを構成する

ログアウトURLとは、Auth0がユーザーをログアウト後にリダイレクトするアプリケーション内URLです。設定されていない場合、ユーザーはアプリケーションからログアウトできず、エラーを受け取ります。

サンプルプロジェクトに沿って進めている場合には、次の値に設定します:

http://localhost:3000

## Sprint Bootアプリケーションを構成する -

Spring依存関係を追加する

Spring BootアプリケーションをAuth0と統合するには、Okta Spring Boot Starterをアプリケーションの依存関係に含めます。

このガイドでは、ビューレイヤー用にThymeleafSpring Security統合モジュールを使用しています。別の表示技術を使用している場合、Spring Securityの構成とコンポーネントはそのまま同じです。

Gradleを使用している場合は、以下のようにこれらの依存関係を含めることができます。

plugins {
+

Spring依存関係を追加する

Spring BootアプリケーションをAuth0と統合するには、Okta Spring Boot Starterをアプリケーションの依存関係に含めます。

このガイドでは、ビューレイヤー用にThymeleafSpring Security統合モジュールを使用しています。別の表示技術を使用している場合、Spring Securityの構成とコンポーネントはそのまま同じです。

Gradleを使用している場合は、以下のようにこれらの依存関係を含めることができます。

plugins {
 
  id 'java'
 
@@ -125,7 +125,7 @@ implementation 'nz.net.ultraq.thymeleaf:thymeleaf-layout-dialect'
 ## Spring Securityを構成する {{{ data-action="code" data-code="application.yml" }}}
 
 
-

Okta Spring Boot Starterでは、Auth0でアプリケーションを簡単に構成できます。以下のサンプルではapplication.ymlファイルを使用していますが、プロパティファイルや他のサポートされる表出化メカニズムを使用することもできます。

#src/main/resources/application.yml
+

Okta Spring Boot Starterでは、Auth0でアプリケーションを簡単に構成できます。以下のサンプルではapplication.ymlファイルを使用していますが、プロパティファイルや他のサポートされる表出化メカニズムを使用することもできます。

#src/main/resources/application.yml
 
 
 
@@ -158,7 +158,7 @@ server:
 ## アプリケーションにログインを追加する {{{ data-action="code" data-code="SecurityConfig.java" }}}
 
 
-

Auth0でユーザーログインを有効にするには、SecurityFilterChainを登録するクラスを作成し、@Configurationの注釈を追加します。

すべてまたは特定のパスで認証を必須にするために、HttpSecurityインスタンスを構成することができます。たとえば、ホームページを除くすべてのパスで認証を必須にするには、以下のようにします:

http.authorizeHttpRequests(authorize -> authorize
+

Auth0でユーザーログインを有効にするには、SecurityFilterChainを登録するクラスを作成し、@Configurationの注釈を追加します。

すべてまたは特定のパスで認証を必須にするために、HttpSecurityインスタンスを構成することができます。たとえば、ホームページを除くすべてのパスで認証を必須にするには、以下のようにします:

http.authorizeHttpRequests(authorize -> authorize
 
         .requestMatchers("/").permitAll()
 
@@ -178,18 +178,18 @@ server:
 ## コントローラーを追加する {{{ data-action="code" data-code="HomeController.java" }}}
 
 
-

受信リクエストを処理するようにコントロールを作成します。このコントローラはindex.htmlページをレンダリングします。ユーザー認証時に、アプリケーションはユーザーのプロファイル情報の属性を取得し、ページをレンダリングします。

spring boot手順6「チェックポイント」

ログインリンクをクリックすると、アプリケーションによってAuth0ユニバーサルログインページにリダイレクトされ、ユーザー名とパスワードまたはソーシャルプロバイダーを使ってログインまたはサインアップできるようになったことを確認します。

+

受信要求を処理するようにコントロールを作成します。このコントローラはindex.htmlページをレンダリングします。ユーザー認証時に、アプリケーションはユーザーのプロファイル情報の属性を取得し、ページをレンダリングします。

spring boot手順6「チェックポイント」

ログインリンクをクリックすると、アプリケーションによってAuth0ユニバーサルログインページにリダイレクトされ、ユーザー名とパスワードまたはソーシャルプロバイダーを使ってログインまたはサインアップできるようになったことを確認します。

-

null

Auth0は、Googleソーシャルプロバイダーを新しいテナントでデフォルトで有効にし、ソーシャルIDプロバイダーでログインテストを実施するための開発者キーを提供します。ただし、これらの開発者キーにはいくつかの制限が設けられており、これによってアプリケーションが異なる動作をする場合があります。この動作の様子と修正方法については、「Auth0開発者キーを使ってソーシャル接続をテストする」ドキュメントを参照してください。

+

null

Auth0は、Googleソーシャルプロバイダーを新しいテナントでデフォルトで有効にし、ソーシャルIDプロバイダーでログインテストを実施するための開発者キーを提供します。ただし、これらの開発者キーにはいくつかの制限が設けられており、これによってアプリケーションが異なる動作をする場合があります。この動作の様子と修正方法については、「Auth0開発者キーを使ってソーシャル接続をテストする」ドキュメントを参照してください。

## アプリケーションにログアウトを追加する {{{ data-action="code" data-code="SecurityConfigWithLogout.java" }}} -

アプリケーションにログインできるようになったら、ログアウトする方法が必要です。デフォルトで、ログアウトが有効になると、Spring Securityはユーザーをアプリケーションからログアウトし、セッションを消去します。Auth0から正常にログアウトするには、LogoutHandlerでユーザーをAuth0ログアウトエンドポイントhttps://{yourDomain}/v2/logout)にリダイレクトした直後に、アプリケーションにリダイレクトします。

SecurityConfigクラスでLogoutHandlerを指定すると、Auth0ログアウトエンドポイントにリダイレクトされ、ログアウトハンドラを追加するようにHttpSecurityを構成します。

spring boot手順7「チェックポイント」

ログアウトリンクをクリックすると、「Settings(設定)」にある[Allowed Logout URLs(許可されているログアウトURL)]のいずれかに指定されたアドレスにリダイレクトされ、アプリケーションにログインされなくなります。

+

アプリケーションにログインできるようになったら、ログアウトする方法が必要です。デフォルトで、ログアウトが有効になると、Spring Securityはユーザーをアプリケーションからログアウトし、セッションを消去します。Auth0から正常にログアウトするには、LogoutHandlerでユーザーをAuth0ログアウトエンドポイントhttps://{yourDomain}/v2/logout)にリダイレクトした直後に、アプリケーションにリダイレクトします。

SecurityConfigクラスでLogoutHandlerを指定すると、Auth0ログアウトエンドポイントにリダイレクトされ、ログアウトハンドラを追加するようにHttpSecurityを構成します。

spring boot手順7「チェックポイント」

ログアウトリンクをクリックすると、「Settings(設定)」にある[Allowed Logout URLs(許可されているログアウトURL)]のいずれかに指定されたアドレスにリダイレクトされ、アプリケーションにログインされなくなります。

diff --git a/ja-jp/articles/quickstart/webapp/java/interactive.md b/ja-jp/articles/quickstart/webapp/java/interactive.md index d4d967932d..6e9c2f4ae5 100644 --- a/ja-jp/articles/quickstart/webapp/java/interactive.md +++ b/ja-jp/articles/quickstart/webapp/java/interactive.md @@ -10,7 +10,7 @@ files: - files/HomeServlet - files/LogoutServlet github: - path: https://github.com/auth0-samples/auth0-servlet-sample/tree/master/01-Login + path: 01-Login locale: ja-JP --- @@ -22,12 +22,12 @@ locale: ja-JP ## Auth0を構成する -

Auth0のサービスを利用するには、Auth0 Dashboadに設定済みのアプリケーションがある必要があります。Auth0アプリケーションは、開発中のプロジェクトに対してどのように認証が動作して欲しいかを構成する場所です。

アプリケーションを構成する

対話型のセレクターを使ってAuth0アプリケーションを新規作成するか、統合したいプロジェクトを表す既存のアプリケーションを選択します。Auth0のすべてのアプリケーションには英数字からなる一意のクライアントIDが割り当てられており、アプリケーションのコードがSDKを通じてAuth0 APIを呼び出す際に使用されます。

このクイックスタートを使って構成されたすべての設定は、Dashboardのアプリケーションを自動更新します。今後、アプリケーションの管理もDashboardで行えます。

完了済みの構成を見てみたい場合は、サンプルアプリケーションをご覧ください。

Callback URLを構成する

Callback URLとは、Auth0がユーザーを認証後にリダイレクトするアプリケーション内URLです。設定されていない場合、ユーザーはログイン後にアプリケーションに戻りません。

サンプルプロジェクトに沿って進めている場合は、http://localhost:3000/callbackに設定してください。

ログアウトURLを構成する

ログアウトURLとは、Auth0がユーザーをログアウト後にリダイレクトするアプリケーション内URLです。設定されていない場合、ユーザーはアプリケーションからログアウトできず、エラーを受け取ります。

サンプルプロジェクトに沿って進めている場合は、http://localhost:3000/logoutに設定してください。

+

Auth0のサービスを利用するには、Auth0 Dashboadに設定済みのアプリケーションがある必要があります。Auth0アプリケーションは、開発中のプロジェクトに対してどのように認証が動作して欲しいかを構成する場所です。

アプリケーションを構成する

対話型のセレクターを使ってAuth0アプリケーションを新規作成するか、統合したいプロジェクトを表す既存のアプリケーションを選択します。Auth0のすべてのアプリケーションには英数字からなる一意のクライアントIDが割り当てられており、アプリケーションのコードがSDKを通じてAuth0 APIを呼び出す際に使用されます。

このクイックスタートを使って構成されたすべての設定は、Dashboardのアプリケーションを自動更新します。今後、アプリケーションの管理もDashboardで行えます。

完了済みの構成を見てみたい場合は、サンプルアプリケーションをご覧ください。

Callback URLを構成する

Callback URLとは、Auth0がユーザーを認証後にリダイレクトするアプリケーション内URLです。設定されていない場合、ユーザーはログイン後にアプリケーションに戻りません。

サンプルプロジェクトに沿って進めている場合は、http://localhost:3000/callbackに設定してください。

ログアウトURLを構成する

ログアウトURLとは、Auth0がユーザーをログアウト後にリダイレクトするアプリケーション内URLです。設定されていない場合、ユーザーはアプリケーションからログアウトできず、エラーを受け取ります。

サンプルプロジェクトに沿って進めている場合は、http://localhost:3000/logoutに設定してください。

## Auth0をアプリケーションに統合する -

依存関係をセットアップする

Auth0でJavaアプリケーションを統合するには、以下の依存関係を追加します:

  • javax.servlet-api

    :Java Servletsの作成を許可するライブラリーです。TomcatやGrettyのようなサーバー依存関係を追加する必要があります。どれを追加するかは自己判断です。詳細はサンプルコードをご覧ください。

  • auth0-java-mvc-commons:サーバー側のMVC Webアプリ用にJavaでAuth0の使用を許可するJavaライブラリーです。ユーザーを識別するAuth0トークンを最後に取得する過程で受け取った結果を認証、検証するために呼び出す必要のある認可URLを生成します。

Gradleを使用している場合は、build.gradleに追加します:

// build.gradle
+

依存関係をセットアップする

Auth0でJavaアプリケーションを統合するには、以下の依存関係を追加します:

  • javax.servlet-api

    :Java Servletsの作成を許可するライブラリーです。TomcatやGrettyのようなサーバー依存関係を追加する必要があります。どれを追加するかは自己判断です。詳細はサンプルコードをご覧ください。

  • auth0-java-mvc-commons:サーバー側のMVC Webアプリ用にJavaでAuth0の使用を許可するJavaライブラリーです。ユーザーを識別するAuth0トークンを最後に取得する過程で受け取った結果を認証、検証するために呼び出す必要のある認可URLを生成します。

Gradleを使用している場合は、build.gradleに追加します:

// build.gradle
 
 
 
@@ -68,7 +68,7 @@ compile 'com.auth0:mvc-auth-commons:1.+'W
 ## Javaアプリケーションを構成する {{{ data-action="code" data-code="web.xml" }}}
 
 
-

Javaアプリは、Auth0アカウントに対して認証するために、いくつかの情報を必要とします。サンプルではこの情報をデプロイメント記述子ファイル(src/main/webapp/WEB-INF/web.xml)から読み取っていますが、任意の場所に保存できます。

この情報はauth0-java-mvc-commonsライブラリーを構成するために使用され、ユーザーがアプリケーションにログインすることを可能にします。ライブラリーや各構成オプションの詳細情報については、ライブラリーのドキュメントをご覧ください。

入力された属性をチェックする

このサンプルを[Download Sample(サンプルをダウンロード)]ボタンでダウンロードした場合は、domainclientIdclientSecret属性が自動的に入力されます。特にアカウントに複数のAuth0アプリケーションがある場合は、値が正しいことを確認してください。

プロジェクト構造

[Download Sample(サンプルをダウンロード)]ボタンでダウンロードできるサンプルプロジェクトは以下の構造になっています:

- src
+

Javaアプリは、Auth0アカウントに対して認証するために、いくつかの情報を必要とします。サンプルではこの情報をデプロイメント記述子ファイル(src/main/webapp/WEB-INF/web.xml)から読み取っていますが、任意の場所に保存できます。

この情報はauth0-java-mvc-commonsライブラリーを構成するために使用され、ユーザーがアプリケーションにログインすることを可能にします。ライブラリーや各構成オプションの詳細情報については、ライブラリーのドキュメントをご覧ください。

入力された属性をチェックする

このサンプルを[Download Sample(サンプルをダウンロード)]ボタンでダウンロードした場合は、domainclientIdclientSecret属性が自動的に入力されます。特にアカウントに複数のAuth0アプリケーションがある場合は、値が正しいことを確認してください。

プロジェクト構造

[Download Sample(サンプルをダウンロード)]ボタンでダウンロードできるサンプルプロジェクトは以下の構造になっています:

- src
 
 -- main
 
@@ -111,7 +111,7 @@ compile 'com.auth0:mvc-auth-commons:1.+'W
 ## AuthenticationControllerを作成する {{{ data-action="code" data-code="AuthenticationControllerProvider.java#5:26" }}}
 
 
-

ユーザー認証を可能にするために、domainclientIdclientSecretを使ってauth0-java-mvc-commons SDKから提供されたAuthenticationControllerのインスタンスを作成します。サンプルでは、RS256非対称署名アルゴリズムを使って署名したトークンで使用するためのコンポーネントの構成方法が紹介されています。トークンの署名を検証するために使用された公開鍵を取得するJwkProviderが指定されています。その他の構成オプションについての詳細は、jwks-rsa-javaレポジトリをご覧ください。HS256を使用している場合は、JwkProviderを構成する必要はありません。

AuthenticationControllerはコンテキストを一切保存せず、再使用を意図しています。不必要な作成はリソースの追加作成を招き、パフォーマンスに影響が出る可能性があります。

+

ユーザー認証を可能にするために、domainclientIdclientSecretを使ってauth0-java-mvc-commons SDKから提供されたAuthenticationControllerのインスタンスを作成します。サンプルでは、RS256非対称署名アルゴリズムを使って署名したトークンで使用するためのコンポーネントの構成方法が紹介されています。トークンの署名を検証するために使用された公開鍵を取得するJwkProviderが指定されています。その他の構成オプションについての詳細は、jwks-rsa-javaレポジトリをご覧ください。HS256を使用している場合は、JwkProviderを構成する必要はありません。

AuthenticationControllerはコンテキストを一切保存せず、再使用を意図しています。不必要な作成はリソースの追加作成を招き、パフォーマンスに影響が出る可能性があります。

## ログインにリダイレクトする {{{ data-action="code" data-code="LoginServlet.java#21:23" }}} @@ -131,9 +131,9 @@ compile 'com.auth0:mvc-auth-commons:1.+'W ## ログアウトを処理する {{{ data-action="code" data-code="LogoutServlet.java#13:30" }}} -

ログアウトを適切に処理するには、セッションを消去し、ユーザーをAuth0からログアウトさせる必要があります。この処理は、サンプルアプリケーションのLogoutServletで行われます。

まず、request.getSession().invalidate()を呼び出してセッションを消去します。それから、returnToクエリパラメーターを含めることを念頭に置きつつ、ログアウトURLを構築します。ユーザーはログアウト後にこのURLにリダイレクトされます。最後にレスポンスをログアウトURLにリダイレクトします。

+

ログアウトを適切に処理するには、セッションを消去し、ユーザーをAuth0からログアウトさせる必要があります。この処理は、サンプルアプリケーションのLogoutServletで行われます。

まず、request.getSession().invalidate()を呼び出してセッションを消去します。それから、returnToクエリパラメーターを含めることを念頭に置きつつ、ログアウトURLを構築します。ユーザーはログアウト後にこのURLにリダイレクトされます。最後に応答をログアウトURLにリダイレクトします。

## サンプルを実行する -

ターミナルからサンプルを実行するには、ディレクトリをプロジェクトのルートフォルダーに変更して以下のラインを実行します:

./gradlew clean app

数秒後、アプリケーションがhttp://localhost:3000/でアクセスできるようになります。保護されたリソース(http://localhost:3000/portal/home)にアクセスしてみて、Auth0FilterによるAuth0ログインページへのリダイレクト方法を観察します。ウィジェット が、Dashboardでこのアプリケーションに定義したソーシャル接続とデータベース接続をすべて表示します。

null

認証成功後、ホームページのコンテンツを見られるようになります。

null

ホームページ右上の[logout(ログアウト)]ボタン をクリックしてログアウトします。

+

ターミナルからサンプルを実行するには、ディレクトリをプロジェクトのルートフォルダーに変更して以下のラインを実行します:

./gradlew clean app

数秒後、アプリケーションがhttp://localhost:3000/でアクセスできるようになります。保護されたリソース(http://localhost:3000/portal/home)にアクセスしてみて、Auth0FilterによるAuth0ログインページへのリダイレクト方法を観察します。ウィジェット が、Dashboardでこのアプリケーションに定義したソーシャル接続とデータベース接続をすべて表示します。

null

認証成功後、ホームページのコンテンツを見られるようになります。

null

ホームページ右上の[logout(ログアウト)]ボタン をクリックしてログアウトします。

diff --git a/ja-jp/articles/quickstart/webapp/laravel/interactive.md b/ja-jp/articles/quickstart/webapp/laravel/interactive.md index a37d4e0bfa..8550a63707 100644 --- a/ja-jp/articles/quickstart/webapp/laravel/interactive.md +++ b/ja-jp/articles/quickstart/webapp/laravel/interactive.md @@ -5,57 +5,249 @@ interactive: true files: - files/routes/web github: - path: https://github.com/auth0-samples/laravel/tree/bf356d877b5dae566286fc8400da94b8b4b0ac76/sample + path: sample locale: ja-JP --- # Laravelアプリケーションにログインを追加する -

Auth0のLaravel SDKを使用すると、Laravelアプリケーションに認証、ユーザープロファイル管理、ルーティングに基づくアクセスコントロールを手軽に追加できます。このガイドでは、新規(または既存)のLaravel 9または10アプリケーションにAuth0を統合する方法を説明します。

+

Auth0のLaravel SDKを使用すると、Laravelアプリケーションに認証、ユーザープロファイル管理、ルーティングに基づくアクセスコントロールを手軽に追加できます。このガイドでは、新規(または既存)のLaravel 9または10アプリケーションにAuth0を統合する方法を説明します。

## Laravelをインストールする -

Laravelアプリケーションをまだセットアップしていない場合には、シェルを開いて、新規プロジェクトに適切なディレクトリに移動し、次のコマンドを実行します:

composer create-project --prefer-dist laravel/laravel auth0-laravel-app ^9.0

このガイドにあるすべてのコマンドは、Laravelプロジェクトディレクトリのルートから実行されていることを前提としています。必ず新規プロジェクトのディレクトリに移動(cd)してください:

cd auth0-laravel-app

+

Laravelアプリケーションをまだセットアップしていない場合には、シェルを開いて、新規プロジェクトに適切なディレクトリに移動し、次のコマンドを実行します:

composer create-project --prefer-dist laravel/laravel auth0-laravel-app ^9.0
+
+
+ +

このガイドにあるすべてのコマンドは、Laravelプロジェクトディレクトリのルートから実行されていることを前提としています。必ず新規プロジェクトのディレクトリに移動(cd)してください:

cd auth0-laravel-app
+
+
+ +

## SDKをインストールする -

プロジェクトディレクトリで次のコマンドを実行して、Auth0 Laravel SDKをインストールします:

composer require auth0/login:^7.8 --update-with-all-dependencies

そして、アプリケーションにSDK構成ファイルを生成します:

php artisan vendor:publish --tag auth0

+

プロジェクトディレクトリで次のコマンドを実行して、Auth0 Laravel SDKをインストールします:

composer require auth0/login:^7.8 --update-with-all-dependencies
+
+
+ +

そして、アプリケーションにSDK構成ファイルを生成します:

php artisan vendor:publish --tag auth0
+
+
+ +

## SDKを構成する -

プロジェクトディレクトリから次のコマンドを実行して、Auth0 CLIをダウンロードします:

curl -sSfL https://raw.githubusercontent.com/auth0/auth0-cli/main/install.sh | sh -s -- -b .

そして、Auth0アカウントを使ってCLIを認証し、プロンプトでユーザーとしてログインすることを選択します:

./auth0 login

次に、Auth0で新しいアプリケーションを作成します:

また、新しいAPIも作成します:

これで、SDKを構成するプロジェクトディレクトリ内に2つのファイルが作成されます。

これらのファイルには資格情報が保管されているため、機密として扱うことが重要です。必ず、バージョン管理では、これらのファイルをコミットしないようにしてください。Gitを使用している場合は、必ず.gitignoreファイルに追加します:

echo ".auth0.*.json" >> .gitignore

+

プロジェクトディレクトリから次のコマンドを実行して、Auth0 CLIをダウンロードします:

curl -sSfL https://raw.githubusercontent.com/auth0/auth0-cli/main/install.sh | sh -s -- -b .
+
+
+ +

そして、Auth0アカウントを使ってCLIを認証し、プロンプトでユーザーとしてログインすることを選択します:

./auth0 login
+
+
+ +

次に、Auth0で新しいアプリケーションを作成します:

./auth0 apps create \
+
+  --name "My Laravel Application" \
+
+  --type "regular" \
+
+  --auth-method "post" \
+
+  --callbacks "http://localhost:8000/callback" \
+
+  --logout-urls "http://localhost:8000" \
+
+  --reveal-secrets \
+
+  --no-input \
+
+  --json > .auth0.app.json
+
+
+ +

また、新しいAPIも作成します:

./auth0 apis create \
+
+  --name "My Laravel Application's API" \
+
+  --identifier "https://github.com/auth0/laravel-auth0" \
+
+  --offline-access \
+
+  --no-input \
+
+  --json > .auth0.api.json
+
+
+ +

これで、SDKを構成するプロジェクトディレクトリ内に2つのファイルが作成されます。

これらのファイルには資格情報が保管されているため、機密として扱うことが重要です。必ず、バージョン管理では、これらのファイルをコミットしないようにしてください。Gitを使用している場合は、必ず.gitignoreファイルに追加します:

echo ".auth0.*.json" >> .gitignore
+
+
+ +

## ログイン経路 -

SDKは、アプリケーションのユーザーを認証するために必要なすべての経路を自動的に登録します。

これらについて細かな制御が必要な場合や、アプリケーションで既存の経路と競合する場合には、SDKのコントローラーを手動で登録することができます。高度な統合について、SDKのREADMEを参照してください。

+

SDKは、アプリケーションのユーザーを認証するために必要なすべての経路を自動的に登録します。

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
**経路****目的**
/login認証フローを開始します。
/logoutユーザーをログアウトさせます。
/callbackAuth0からのコールバックを処理します。

これらについて細かな制御が必要な場合や、アプリケーションで既存の経路と競合する場合には、SDKのコントローラーを手動で登録することができます。高度な統合について、SDKのREADMEを参照してください。

## アクセス制御 {{{ data-action="code" data-code="routes/web.php#6:12" }}} -

Laravelの認証機能は「guards」を使用して、それぞれの要求でユーザーがどのように認証されるのかを定義します。アプリケーションの経路へのアクセスを制約するには、Auth0 SDKの認証ガードを使用することができます。

経路へのアクセスに先だって、ユーザーの認証を要求するには、Laravelのauthミドルウェアを使用することができます。

また、これをLaravelのcanミドルウェアと組み合わせると、認証済みのユーザーに特定の権限を要求することができます。

+

Laravelの認証機能は「guards」を使用して、それぞれの要求でユーザーがどのように認証されるのかを定義します。アプリケーションの経路へのアクセスを制約するには、Auth0 SDKの認証ガードを使用することができます。

経路へのアクセスに先だって、ユーザーの認証を要求するには、Laravelのauthミドルウェアを使用することができます。

Route::get('/private', function () {
+
+  return response('Welcome! You are logged in.');
+
+})->middleware('auth');
+
+
+ +

また、これをLaravelのcanミドルウェアと組み合わせると、認証済みのユーザーに特定の権限を要求することができます。

Route::get('/scope', function () {
+
+    return response('You have `read:messages` permission, and can therefore access this resource.');
+
+})->middleware('auth')->can('read:messages');
+
+
+ +

## ユーザー情報 {{{ data-action="code" data-code="routes/web.php#14:24" }}} -

認証済みのユーザーについての情報は、LaravelのAuthファサードまたはauth()ヘルパー関数を介して利用できます。

以下は、ユーザーの識別子とメールアドレスを取得する例です。

+

認証済みのユーザーについての情報は、LaravelのAuthファサードまたはauth()ヘルパー関数を介して利用できます。

以下は、ユーザーの識別子とメールアドレスを取得する例です。

Route::get('/', function () {
+
+  if (! auth()->check()) {
+
+    return response('You are not logged in.');
+
+  }
+
+
+
+  $user = auth()->user();
+
+  $name = $user->name ?? 'User';
+
+  $email = $user->email ?? '';
+
+
+
+  return response("Hello {$name}! Your email address is {$email}.");
+
+});;
+
+
+ +

## ユーザー管理 {{{ data-action="code" data-code="routes/web.php#26:43" }}} -

ユーザー情報は、Auth0 Management APIを使用して更新することができます。管理エンドポイントはすべて、SDKのmanagement()メソッドでアクセスすることができます。

Management APIを呼び出す前に、アプリケーションがManagement APIと通信できるようにしなければなりません。これを実行するには、Auth0 DashboardのAPIページ[Auth0 Management API]を選択してから[Machine to Machine Applications(M2Mアプリケーション)]タブを選択します。Laravelアプリケーションを認可してから、下矢印をクリックして、付与したいスコープを選択します。

以下の例では、ユーザーのメタデータを更新し、好きな色をランダムに割り当てますが、必ずread:usersupdate:usersのスコープを付与するようにします。APIエンドポイントのリストと必要なスコープについては、Management APIのドキュメントを参照してください。

SDKにあるManagement APIの全メソッドについては、こちらにクイックリファレンスガイドがあります。

+

ユーザー情報は、Auth0 Management APIを使用して更新することができます。管理エンドポイントはすべて、SDKのmanagement()メソッドでアクセスすることができます。

Management APIを呼び出す前に、アプリケーションがManagement APIと通信できるようにしなければなりません。これを実行するには、Auth0 DashboardのAPIページ[Auth0 Management API]を選択してから[Machine to Machine Applications(M2Mアプリケーション)]タブを選択します。Laravelアプリケーションを認可してから、下矢印をクリックして、付与したいスコープを選択します。

以下の例では、ユーザーのメタデータを更新し、好きな色をランダムに割り当てますが、必ずread:usersupdate:usersのスコープを付与するようにします。APIエンドポイントのリストと必要なスコープについては、Management APIのドキュメントを参照してください。

use Auth0\Laravel\Facade\Auth0;
+
+
+
+Route::get('/colors', function () {
+
+  $endpoint = Auth0::management()->users();
+
+
+
+  $colors = ['red', 'blue', 'green', 'black', 'white', 'yellow', 'purple', 'orange', 'pink', 'brown'];
+
+
+
+  $endpoint->update(
+
+    id: auth()->id(),
+
+    body: [
+
+        'user_metadata' => [
+
+            'color' => $colors[random_int(0, count($colors) - 1)]
+
+        ]
+
+    ]
+
+  );
+
+
+
+  $metadata = $endpoint->get(auth()->id());
+
+  $metadata = Auth0::json($metadata);
+
+
+
+  $color = $metadata['user_metadata']['color'] ?? 'unknown';
+
+  $name = auth()->user()->name;
+
+
+
+  return response("Hello {$name}! Your favorite color is {$color}.");
+
+})->middleware('auth');
+
+
+ +

SDKにあるManagement APIの全メソッドについては、こちらにクイックリファレンスガイドがあります。

## アプリケーションを実行する -

Laravelアプリケーションを起動する準備が整いました。要求を受け付けることができます:

php artisan serve

Laravel - 手順8 - アプリケーションを実行する - チェックポイント

ブラウザーを開いて、以下の経路にアクセスしてみてください。

+

Laravelアプリケーションを起動する準備が整いました。要求を受け付けることができます:

php artisan serve

Laravel - 手順8 - アプリケーションを実行する - チェックポイント

ブラウザーを開いて、以下の経路にアクセスしてみてください。

-

その他の情報

  • ユーザーリポジトリとモデルはAuth0 Laravel SDKを拡張して、カスタムのユーザーモデルを使用し、データベースでユーザーの保管や取得を行う方法を指定することができます。

  • イベントフックはAuth0 Laravel SDKで発生したイベントを聞く方法を処理して、統合の動作を完全にカスタマイズすることができます。

  • Management API対応はAuth0 Laravel SDKに組み込まれているため、LaravelアプリケーションからManagement APIと対話することができます。

+

その他の情報

  • ユーザーリポジトリとモデルはAuth0 Laravel SDKを拡張して、カスタムのユーザーモデルを使用し、データベースでユーザーの保管や取得を行う方法を指定することができます。

  • イベントフックはAuth0 Laravel SDKで発生したイベントを聞く方法を処理して、統合の動作を完全にカスタマイズすることができます。

  • Management API対応はAuth0 Laravel SDKに組み込まれているため、LaravelアプリケーションからManagement APIと対話することができます。

diff --git a/ja-jp/articles/quickstart/webapp/nextjs/files/.env.md b/ja-jp/articles/quickstart/webapp/nextjs/files/.env.md index 515f3b4950..e4de060766 100644 --- a/ja-jp/articles/quickstart/webapp/nextjs/files/.env.md +++ b/ja-jp/articles/quickstart/webapp/nextjs/files/.env.md @@ -6,7 +6,7 @@ language: ``` AUTH0_SECRET='use [openssl rand -hex 32] to generate a 32 bytes value' APP_BASE_URL='http://localhost:3000' -AUTH0_ISSUER_BASE_URL='https://${account.namespace}' +AUTH0_DOMAIN='https://${account.namespace}' AUTH0_CLIENT_ID='${account.clientId}' AUTH0_CLIENT_SECRET='${account.clientSecret}' ``` diff --git a/ja-jp/articles/quickstart/webapp/nextjs/interactive.md b/ja-jp/articles/quickstart/webapp/nextjs/interactive.md index 51cd00a4c9..bf675dba9d 100644 --- a/ja-jp/articles/quickstart/webapp/nextjs/interactive.md +++ b/ja-jp/articles/quickstart/webapp/nextjs/interactive.md @@ -8,7 +8,7 @@ files: - files/src/middleware - files/src/app/page github: - path: https://github.com/auth0-samples/auth0-nextjs-samples/tree/main/Sample-01 + path: Sample-01 locale: ja-JP --- @@ -20,27 +20,27 @@ locale: ja-JP ## Auth0を構成する -

Auth0のサービスを利用するには、Auth0 Dashboadに設定済みのアプリケーションがある必要があります。Auth0アプリケーションは、開発中のプロジェクトに対してどのように認証が動作して欲しいかを構成する場所です。

アプリケーションを構成する

対話型のセレクターを使ってAuth0アプリケーションを新規作成するか、統合したいプロジェクトを表す既存のアプリケーションを選択します。Auth0のすべてのアプリケーションには英数字からなる一意のクライアントIDが割り当てられており、アプリケーションのコードがSDKを通じてAuth0 APIを呼び出す際に使用されます。

このクイックスタートを使って構成されたすべての設定は、Dashboardのアプリケーションを自動更新します。今後、アプリケーションの管理もDashboardで行えます。

代わりに完了済みの構成を見てみたい場合は、サンプルアプリケーションをご覧ください。

Callback URLを構成する

Callback URLとは、Auth0がユーザーを認証後にリダイレクトするアプリケーション内URLです。設定されていない場合、ユーザーはログイン後にアプリケーションに戻されません。

サンプルプロジェクトに沿って進めている場合は、http://localhost:3000/auth/callbackに設定してください。

ログアウトURLを構成する

ログアウトURLとは、Auth0がユーザーをログアウト後にリダイレクトするアプリケーション内URLです。設定されていない場合、ユーザーはアプリケーションからログアウトできず、エラーを受け取ります。

サンプルプロジェクトに沿って進めている場合は、http://localhost:3000に設定してください。

+

Auth0のサービスを利用するには、Auth0 Dashboadに設定済みのアプリケーションがある必要があります。Auth0アプリケーションは、開発中のプロジェクトに対してどのように認証が動作して欲しいかを構成する場所です。

アプリケーションを構成する

対話型のセレクターを使ってAuth0アプリケーションを新規作成するか、統合したいプロジェクトを表す既存のアプリケーションを選択します。Auth0のすべてのアプリケーションには英数字からなる一意のクライアントIDが割り当てられており、アプリケーションのコードがSDKを通じてAuth0 APIを呼び出す際に使用されます。

このクイックスタートを使って構成されたすべての設定は、Dashboardのアプリケーションを自動更新します。今後、アプリケーションの管理もDashboardで行えます。

代わりに完了済みの構成を見てみたい場合は、サンプルアプリケーションをご覧ください。

Callback URLを構成する

Callback URLとは、Auth0がユーザーを認証後にリダイレクトするアプリケーション内URLです。設定されていない場合、ユーザーはログイン後にアプリケーションに戻されません。

サンプルプロジェクトに沿って進めている場合は、http://localhost:3000/auth/callbackに設定してください。

ログアウトURLを構成する

ログアウトURLとは、Auth0がユーザーをログアウト後にリダイレクトするアプリケーション内URLです。設定されていない場合、ユーザーはアプリケーションからログアウトできず、エラーを受け取ります。

サンプルプロジェクトに沿って進めている場合は、http://localhost:3000に設定してください。

## Auth0 Next.js SDKをインストールする -

プロジェクトディレクトリで次のコマンドを実行して、Auth0 Next.js SDKをインストールします:

npm install @auth0/nextjs-auth0

SDKは、Auth0をNext.jsアプリケーションに統合するのに役立つメソッドと変数を公開します。この際、バックエンドではルートハンドラーを、フロントエンドではReactフックが付いたReactコンテキストを使用します。

+

プロジェクトディレクトリで次のコマンドを実行して、Auth0 Next.js SDKをインストールします:

npm install @auth0/nextjs-auth0

SDKは、Auth0をNext.jsアプリケーションに統合するのに役立つメソッドと変数を公開します。この際、バックエンドではルートハンドラーを、フロントエンドではReactフックが付いたReactコンテキストを使用します。

## SDKを構成する {{{ data-action="code" data-code=".env.local" }}} -

プロジェクトのルートディレクトリで、.env.localファイルを追加し、以下の変数環境を設定します:

  • AUTH0_SECRET:セッションクッキーの暗号化に使用する長いシークレット値です。適した文字列は、コマンドラインのopenssl rand -hex 32で生成できます。

  • AUTH0_BASE_URL:アプリケーションのベースURLです。

  • AUTH0_ISSUER_BASE_URL:Auth0テナントドメインのURLです。Auth0を使用したカスタムドメインでは、この値を[Settings(設定)]タブに反映された値でなく、カスタムドメインの値に設定します。

  • AUTH0_CLIENT_ID:Auth0アプリケーションのクライアントIDです。

  • AUTH0_CLIENT_SECRET:Auth0アプリケーションのクライアントシークレットです。

SDKは、Node.jsプロセス環境からこれらの値を読み取り、自動構成します。

+

プロジェクトのルートディレクトリで、.env.localファイルを追加し、以下の変数環境を設定します:

  • AUTH0_SECRET:セッションクッキーの暗号化に使用する長いシークレット値です。適した文字列は、コマンドラインのopenssl rand -hex 32で生成できます。

  • AUTH0_BASE_URL:アプリケーションのベースURLです。

  • AUTH0_ISSUER_BASE_URL:Auth0テナントドメインのURLです。Auth0を使用したカスタムドメインでは、この値を[Settings(設定)]タブに反映された値でなく、カスタムドメインの値に設定します。

  • AUTH0_CLIENT_ID:Auth0アプリケーションのクライアントIDです。

  • AUTH0_CLIENT_SECRET:Auth0アプリケーションのクライアントシークレットです。

SDKは、Node.jsプロセス環境からこれらの値を読み取り、自動構成します。

## 動的ルートハンドラーを追加する {{{ data-action="code" data-code="src/lib/auth0.ts" }}} -

このクイックスタートは、Next.jsアプリルーターを取り扱います。ページルーターを使用している場合は、SDKのREADMEの例を確認してください。

app/api/auth/[auth0]/route.jsでファイルを作成します。これは、動的ルートセグメントを持つルートハンドラーです。

次に、SDKからhandleAuthメソッドをインポートし、GETエクスポートから呼び出します。これで、以下のルートが作成されます。

  • /api/auth/login:Auth0でログインを実行するために使用されるルートです。

  • /api/auth/logout:ユーザーをログアウトするために使用されるルートです。

  • /api/auth/callback:ログインに成功した後、Auth0がユーザーをリダイレクトするルートです。

  • /api/auth/me:ユーザープロファイルを取得するためのルートです。

+

このクイックスタートは、Next.jsアプリルーターを取り扱います。ページルーターを使用している場合は、SDKのREADMEの例を確認してください。

app/api/auth/[auth0]/route.jsでファイルを作成します。これは、動的ルートセグメントを持つルートハンドラーです。

次に、SDKからhandleAuthメソッドをインポートし、GETエクスポートから呼び出します。これで、以下のルートが作成されます。

  • /api/auth/login:Auth0でログインを実行するために使用されるルートです。

  • /api/auth/logout:ユーザーをログアウトするために使用されるルートです。

  • /api/auth/callback:ログインに成功した後、Auth0がユーザーをリダイレクトするルートです。

  • /api/auth/me:ユーザープロファイルを取得するためのルートです。

## UserProviderコンポーネントを追加する {{{ data-action="code" data-code="src/middleware.ts" }}} -

フロントエンド側では、SDKはReact Contextを使用して、ユーザーの認証状態を管理します。その状態をすべてのページで使用できるようにするには、Root Layoutコンポーネントを上書きし、app/layout.jsxファイルで<body>タグをUserProviderでラップする必要があります。

UserProviderによって公開された認証状態は、useUser()フックを使って任意のクライアントコンポーネントでアクセスすることができます。

Next.js手順5「チェックポイント」

ルートハンドラーとUserProviderを追加したら、アプリケーションを実行してAuth0に関連したエラーを投入していないか確認します。

+

フロントエンド側では、SDKはReact Contextを使用して、ユーザーの認証状態を管理します。その状態をすべてのページで使用できるようにするには、Root Layoutコンポーネントを上書きし、app/layout.jsxファイルで<body>タグをUserProviderでラップする必要があります。

UserProviderによって公開された認証状態は、useUser()フックを使って任意のクライアントコンポーネントでアクセスすることができます。

Next.js手順5「チェックポイント」

ルートハンドラーとUserProviderを追加したら、アプリケーションを実行してAuth0に関連したエラーを投入していないか確認します。

@@ -51,21 +51,21 @@ locale: ja-JP ## アプリケーションにログインを追加する {{{ data-action="code" data-code="src/app/page.tsx" }}} -

ユーザーはSDKによって提供された/api/auth/loginルートハンドラーを訪れることで、アプリケーションにログインできるようになりました。アンカータグを使ってログインルートを指すリンクをクリックします。クリックするとユーザーはAuth0ユニバーサルログインページにリダイレクトされ、そこで、Auth0はユーザーを認証することができます。認証に成功したら、Auth0はユーザーをアプリケーションにリダイレクトで戻します。

次のリンティング ルールでは、アンカータグでなくLinkコンポーネントを使用することを提案する場合があります。Linkコンポーネントは、クライアント側のページ間の移行を実施するためのものです。リンクはページでなくAPIルートを指すため、アンカータグとして維持する必要があります。

Next.js手順6「チェックポイント」

アプリケーションにログインリンクを追加する

  • ログインリンクをクリックすると、Next.jsアプリケーションによってAuth0ユニバーサルログインページにリダイレクトされ、ユーザー名とパスワードまたはソーシャルプロバイダーを使ってログインまたはサインアップできるようになったことを確認します。

  • 完了したら、Auth0がアプリケーションにリダイレクトで戻されることを確認します。

+

ユーザーはSDKによって提供された/api/auth/loginルートハンドラーを訪れることで、アプリケーションにログインできるようになりました。アンカータグを使ってログインルートを指すリンクをクリックします。クリックするとユーザーはAuth0ユニバーサルログインページにリダイレクトされ、そこで、Auth0はユーザーを認証することができます。認証に成功したら、Auth0はユーザーをアプリケーションにリダイレクトで戻します。

ログアウトの機能性はすでにsrc/app/page.tsxファイルに含まれています。ユーザーが[Log out(ログアウト)]ボタンを選択すると、Auth0のログアウトエンドポイントにリダイレクトされ、セッションの消去後にアプリにリダイレクトで戻されます。

Next.js手順6「チェックポイント」

アプリケーションにログインリンクを追加する

  • ログインリンクをクリックすると、Next.jsアプリケーションによってAuth0ユニバーサルログインページにリダイレクトされ、ユーザー名とパスワードまたはソーシャルプロバイダーを使ってログインまたはサインアップできるようになったことを確認します。

  • 完了したら、Auth0がアプリケーションにリダイレクトで戻すことを確認します。

-

null

Auth0は、Googleソーシャルプロバイダーを新しいテナントでデフォルトで有効にし、ソーシャルIDプロバイダーでログインテストを実施するための開発者キーを提供します。ただし、これらの開発者キーにはいくつかの制限が設けられており、これによってアプリケーションが異なる動作をする場合があります。この動作の様子と修正方法については、「Auth0開発者キーを使ってソーシャル接続をテストする」ドキュメントを参照してください。

+

null

Auth0は、Googleソーシャルプロバイダーを新しいテナントでデフォルトで有効にし、ソーシャルIDプロバイダーでログインテストを実施するための開発者キーを提供します。ただし、これらの開発者キーにはいくつかの制限が設けられており、これによってアプリケーションが異なる動作をする場合があります。この動作の様子と修正方法については、「Auth0開発者キーを使ってソーシャル接続をテストする」ドキュメントを参照してください。

## アプリケーションにログアウトを追加する -

Next.jsアプリケーションにログインできるようになったら、ログアウトする方法が必要です。/api/auth/logout APIルートを指すリンクを追加します。クリックするとユーザーは、Auth0ログアウトエンドポイントhttps://YOUR_DOMAIN/v2/logout)にリダイレクトされ、即座にアプリケーションにリダイレクトで戻ります。

Next.js手順7「チェックポイント」

アプリケーションにログアウトリンクを追加します。クリックすると、 Next.jsアプリケーションによって、[Settings(設定)]で[Allowed Logout URLs(許可されているログアウトURL)]の1つに指定されているアドレスへリダイレクトされます。

+

Next.jsアプリケーションにログインできるようになったら、ログアウトする方法が必要です。/api/auth/logout APIルートを指すリンクを追加します。クリックするとユーザーは、Auth0ログアウトエンドポイントhttps://YOUR_DOMAIN/v2/logout)にリダイレクトされ、即座にアプリケーションにリダイレクトで戻ります。

チェックポイント

アプリケーションを実行する

  • Next.jsアプリケーションがAuth0のユニバーサルログインページにリダイレクトし、ユーザー名とパスワードまたはソーシャルプロバイダーを使ってログインまたはサインアップできるようになったことを確認します。

  • 完了したら、Auth0がアプリケーションにリダイレクトで戻すことを確認します。

-

Sorry about that. Here's a couple of things to double check:

  • are your environment variables populated correctly?

  • make sure that "Allowed Callback URLs" is configured correctly in your tenant

Still having issues? Check out our documentation or visit our community page to get more help.

+

すみません。いくつかの点をもう一度確認してください。

  • 環境変数が正しく入力されていますか?

  • テナントに[Allowed Callback URLs(許可されているCallback URL)]が正しく構成されていることを確認します

まだお困りですか?当社提供のドキュメントまたはコミュニティページで詳しい情報を確認してください。

diff --git a/ja-jp/articles/quickstart/webapp/nginx-plus/interactive.md b/ja-jp/articles/quickstart/webapp/nginx-plus/interactive.md index d6cabecbd3..6955b3554a 100644 --- a/ja-jp/articles/quickstart/webapp/nginx-plus/interactive.md +++ b/ja-jp/articles/quickstart/webapp/nginx-plus/interactive.md @@ -7,8 +7,6 @@ files: - files/openid_connection_configuration - files/openid_connect - files/frontend -github: - path: https://github.com/nginxinc/nginx-openid-connect locale: ja-JP --- @@ -40,7 +38,7 @@ locale: ja-JP
-

次に、テナントのログアウトURLopenid_connect_configuration.confファイルに追加します。

+

次に、テナントのログアウトURLopenid_connect_configuration.confファイルに追加します。

## トークンとJWKSエンドポイントにAccept-Encodingヘッダーを構成する {{{ data-action="code" data-code="openid_connect.server_conf" }}} diff --git a/ja-jp/articles/quickstart/webapp/php/interactive.md b/ja-jp/articles/quickstart/webapp/php/interactive.md index e07eb8b540..a985fe6cd3 100644 --- a/ja-jp/articles/quickstart/webapp/php/interactive.md +++ b/ja-jp/articles/quickstart/webapp/php/interactive.md @@ -10,7 +10,7 @@ files: - files/router - files/callback github: - path: https://github.com/auth0-samples/auth0-php-web-app/tree/main/app + path: app locale: ja-JP --- @@ -22,12 +22,12 @@ locale: ja-JP ## Auth0を構成する -

Auth0のサービスを利用するには、Auth0 Dashboadでセットアップしたアプリケーションが必要です。Auth0アプリケーションは、開発中のプロジェクトに対してどのように認証が動作して欲しいかを構成する場所です。

アプリケーションを構成する

インタラクティブセレクターを使ってAuth0アプリケーションを新規作成するか、統合したいプロジェクトを表す既存のアプリケーションを選択します。Auth0の全てのアプリケーションには英数字からなる一意のクライアントIDが割り当てられており、アプリケーションのコードがSDKを通じてAuth0 APIを呼び出す際に使用されます。

このクイックスタートを使って構成されたすべての設定は、Dashboardのアプリケーションに自動更新を行います。今後、アプリケーションの管理はDashboardで行えます。

代わりに完了済みの構成を見てみたい場合は、サンプルアプリケーションをご覧ください。

Callback URLを構成する

Callback URLとは、Auth0がユーザーを認証後にリダイレクトするアプリケーション内URLです。設定されていない場合、ユーザーはログイン後にアプリケーションに戻りません。

サンプルプロジェクトに沿って進めている場合は、http://localhost:3000/callbackに設定してください。

ログアウトURLを構成する

ログアウトURLとは、Auth0がユーザーをログアウト後にリダイレクトするアプリケーション内URLです。設定されていない場合、ユーザーはアプリケーションからログアウトできず、エラーを受け取ります。

サンプルプロジェクトに沿って進めている場合は、http://localhost:3000に設定してください。

Allowed Web Origins(許可されているWebオリジン)を構成する

[Allowed Web Origin(許可されているWebオリジン)]とは、認証フローにアクセスすることを許可して欲しいURLです。これにはプロジェクトのURLが含まれている必要があります。適切に設定されていない場合、プロジェクトが認証トークンを暗黙でリフレッシュできず、ユーザーがアプリケーションを再び訪問した時、またはページを再読み込みした時にログアウトした状態になってしまいます。

サンプルプロジェクトに沿って進めている場合は、http://localhost:3000に設定してください。

+

Auth0のサービスを利用するには、Auth0 Dashboadでセットアップしたアプリケーションが必要です。Auth0アプリケーションは、開発中のプロジェクトに対してどのように認証が動作して欲しいかを構成する場所です。

アプリケーションを構成する

インタラクティブセレクターを使ってAuth0アプリケーションを新規作成するか、統合したいプロジェクトを表す既存のアプリケーションを選択します。Auth0の全てのアプリケーションには英数字からなる一意のクライアントIDが割り当てられており、アプリケーションのコードがSDKを通じてAuth0 APIを呼び出す際に使用されます。

このクイックスタートを使って構成されたすべての設定は、Dashboardのアプリケーションに自動更新を行います。今後、アプリケーションの管理はDashboardで行えます。

代わりに完了済みの構成を見てみたい場合は、サンプルアプリケーションをご覧ください。

Callback URLを構成する

Callback URLとは、Auth0がユーザーを認証後にリダイレクトするアプリケーション内URLです。設定されていない場合、ユーザーはログイン後にアプリケーションに戻りません。

サンプルプロジェクトに沿って進めている場合は、http://localhost:3000/callbackに設定してください。

ログアウトURLを構成する

ログアウトURLとは、Auth0がユーザーをログアウト後にリダイレクトするアプリケーション内URLです。設定されていない場合、ユーザーはアプリケーションからログアウトできず、エラーを受け取ります。

サンプルプロジェクトに沿って進めている場合は、http://localhost:3000に設定してください。

Allowed Web Origins(許可されているWebオリジン)を構成する

[Allowed Web Origin(許可されているWebオリジン)]とは、認証フローにアクセスすることを許可して欲しいURLです。これにはプロジェクトのURLが含まれている必要があります。適切に設定されていない場合、プロジェクトが認証トークンを暗黙でリフレッシュできず、ユーザーがアプリケーションを再び訪問した時、またはページを再読み込みした時にログアウトした状態になってしまいます。

サンプルプロジェクトに沿って進めている場合は、http://localhost:3000に設定してください。

## Auth0 PHP SDKをインストールする {{{ data-action="code" data-code="index.php" }}} -

PHPアプリで、Auth0の認証・認可を手軽に実装できるように、Auth0はPHP SDK(Auth0-PHP)を提供しています。

Auth0 PHP SDKでは、ネットワーク要求を管理するために、PSR-17PSR-18対応HTTPライブラリーをインストールする必要があります。ライブラリーがない場合は、ターミナルで以下のコマンドを実行して、信頼できる選択肢をインストールすることができます:

cd <your-project-directory>
+

PHPアプリで、Auth0の認証・認可を手軽に実装できるように、Auth0はPHP SDK(Auth0-PHP)を提供しています。

Auth0 PHP SDKでは、ネットワーク要求を管理するために、PSR-17PSR-18対応HTTPライブラリーをインストールする必要があります。ライブラリーがない場合は、ターミナルで以下のコマンドを実行して、信頼できる選択肢をインストールすることができます:

cd <your-project-directory>
 
 composer require symfony/http-client nyholm/psr7
 
@@ -37,18 +37,18 @@ composer require symfony/http-client nyholm/psr7
 
 
-

Auth0 SDKを構成する

アプリケーションでindex.phpと呼ばれる新しいファイルを作成し、index.phpタブにある、右のインタラクティブパネルからコードをコピーします。

SDKが正しく機能するためには、次のプロパティを初期化中にAuth0 SDKで設定しなければなりません:

  • domain:Auth0テナントのドメインです。通常、Auth0 Dashboardにあるアプリケーションの設定の[Domain(ドメイン)]フィールドで確認できます。カスタムドメインを使用している場合は、その値を代わりに設定してください。

  • clientId:このクイックスタートで前にセットアップした、Auth0アプリケーションのIDです。Auth0 Dashboardにあるアプリケーションの[Settings(設定)]の[Client ID(クライアントID)]フィールドで確認できます。

  • clientSecret:このクイックスタートで前にセットアップしたAuth0アプリケーションのシークレットです。Auth0 Dashboardにあるアプリケーションの[Settings(設定)]の[Client Secret(クライアントシークレット)]フィールドで確認できます。

  • redirectUri:ユーザー認証の後、Auth0にユーザーをリダイレクトするアプリケーション内URLです。このクイックスタートで前にセットアップしたCallback URLと呼応します。Auth0 Dashboardにあるアプリケーションの設定の[Callback URLs(コールバックURL)]フィールドでもこの値を確認できます。コードに入力した値と前にセットアップした値は必ず一致させてください。異なった場合はユーザーにエラーが表示されます。

  • cookieSecret:セッションクッキーの暗号化に使用する長いシークレット値です。ターミナルでopenssl rand -hex 32を実行すると、適切な文字列を生成することができます。

PHP手順2「チェックポイント」

Auth0 SDKが正しく構成されました。アプリケーションを実行して次の点を確認します:

  • SDKが正しく初期化している。

  • アプリケーションがAuth0に関連したエラーを投入していない。

+

Auth0 SDKを構成する

アプリケーションでindex.phpと呼ばれる新しいファイルを作成し、index.phpタブにある、右のインタラクティブパネルからコードをコピーします。

SDKが正しく機能するためには、次のプロパティを初期化中にAuth0 SDKで設定しなければなりません:

  • domain:Auth0テナントのドメインです。通常、Auth0 Dashboardにあるアプリケーションの設定の[Domain(ドメイン)]フィールドで確認できます。カスタムドメインを使用している場合は、その値を代わりに設定してください。

  • clientId:このクイックスタートで前にセットアップした、Auth0アプリケーションのIDです。Auth0 Dashboardにあるアプリケーションの[Settings(設定)]の[Client ID(クライアントID)]フィールドで確認できます。

  • clientSecret:このクイックスタートで前にセットアップしたAuth0アプリケーションのシークレットです。Auth0 Dashboardにあるアプリケーションの[Settings(設定)]の[Client Secret(クライアントシークレット)]フィールドで確認できます。

  • redirectUri:ユーザー認証の後、Auth0にユーザーをリダイレクトするアプリケーション内URLです。このクイックスタートで前にセットアップしたCallback URLと呼応します。Auth0 Dashboardにあるアプリケーションの設定の[Callback URLs(コールバックURL)]フィールドでもこの値を確認できます。コードに入力した値と前にセットアップした値は必ず一致させてください。異なった場合はユーザーにエラーが表示されます。

  • cookieSecret:セッションクッキーの暗号化に使用する長いシークレット値です。ターミナルでopenssl rand -hex 32を実行すると、適切な文字列を生成することができます。

PHP手順2「チェックポイント」

Auth0 SDKが正しく構成されました。アプリケーションを実行して次の点を確認します:

  • SDKが正しく初期化している。

  • アプリケーションがAuth0に関連したエラーを投入していない。

-
+

すみません。いくつかの点をもう一度確認してください。

  • 正しいアプリケーションが選択されていることを確認します。

  • URLを入力した後で保存しましたか?

  • ドメインとクライアントIDが正常にインポートされていることを確認します。

まだお困りですか?当社提供のドキュメントまたはコミュニティページで詳しい情報を確認してください。

## ルートを作成する {{{ data-action="code" data-code="router.php" }}} -

次に、受信リクエストをアプリケーションにダイレクトするために、ルーティングライブラリーをインストールします。これは必須手順ではありませんが、本クイックスタートの目的上、アプリケーション構造が簡略化されます。

composer require steampixel/simple-php-router
+

次に、受信要求をアプリケーションにダイレクトするために、ルーティングライブラリーをインストールします。これは必須手順ではありませんが、本クイックスタートの目的上、アプリケーション構造が簡略化されます。

composer require steampixel/simple-php-router
 
 
@@ -61,28 +61,28 @@ composer require symfony/http-client nyholm/psr7
-

Sorry about that. Here's a couple things to double check:

  • You configured the correct redirectUri.

Still having issues? Check out our documentation or visit our community page to get more help.

+

すみません。いくつかの点をもう一度確認してください。

  • 正しいredirectUriが構成されている。

まだお困りですか?当社提供のドキュメントまたはコミュニティページで詳しい情報を確認してください。

## アプリケーションにログアウトを追加する {{{ data-action="code" data-code="logout.php" }}} -

プロジェクトにログインしたユーザーには、ログアウトする方法も必要です。SDKのlogout()メソッドを使用してログアウトボタンを処理します。ユーザーはログアウトすると、Auth0ログアウトエンドポイントにリダイレクトされてから、即座に、このクイックスタートで先ほどセットアップしたログアウトURLへとリダイレクトで戻されます。

アプリケーションでlogout.phpという名前の新規ファイルを作成し、インタラクティブパネルからコードをコピーします。これにはログアウトに必要なロジックが含まれています。それからindex.phpファイルを更新して新しいログアウトボタンを含めます。

PHPセクション5「チェックポイント」

アプリケーションを実行してログアウトボタンをクリックし、次の点を確認します:

  • アプリケーションによって、アプリケーションの設定で[Allowed Logout URLs(許可されているログアウトURL)]の1つに指定されているアドレスへリダイレクトされる。

  • アプリケーションにもうログインしていない。

+

プロジェクトにログインしたユーザーには、ログアウトする方法も必要です。SDKのlogout()メソッドを使用してログアウトボタンを処理します。ユーザーはログアウトすると、Auth0ログアウトエンドポイントにリダイレクトされてから、即座に、このクイックスタートで先ほどセットアップしたログアウトURLへとリダイレクトで戻されます。

アプリケーションでlogout.phpという名前の新規ファイルを作成し、インタラクティブパネルからコードをコピーします。これにはログアウトに必要なロジックが含まれています。それからindex.phpファイルを更新して新しいログアウトボタンを含めます。

PHPセクション5「チェックポイント」

アプリケーションを実行してログアウトボタンをクリックし、次の点を確認します:

  • アプリケーションによって、アプリケーションの設定で[Allowed Logout URLs(許可されているログアウトURL)]の1つに指定されているアドレスへリダイレクトされる。

  • アプリケーションにもうログインしていない。

-

Sorry about that. Here's a couple things to double check:

  • You configured the correct Logout URL.

Still having issues? Check out our documentation or visit our community page to get more help.

+

すみません。いくつかの点をもう一度確認してください。

  • 正しいログアウトURLが構成されている。

まだお困りですか?当社提供のドキュメントまたはコミュニティページで詳しい情報を確認してください。

## ユーザープロファイル情報を表示する {{{ data-action="code" data-code="profile.php" }}} -

ユーザーがログインやログアウトできるようになったら、認証済のユーザーに関連付けられたプロファイル情報を取得できるようにしたいと考えるはずです。たとえば、ログインしたユーザーの名前やプロフィール写真をプロジェクトに表示したいかもしれません。

Auth0 PHP SDKではgetCredentials()メソッドからユーザー情報が提供されます。インタラクティブパネルでprofile.phpコードを確認し、使用方法の例をチェックします。

このメソッドにはユーザーのアイデンティティに関する機密情報が含まれるため、この方法が使用できるかはユーザーの認証ステータスによります。エラーを防ぐため、getCredentials()メソッドがobjectまたはnullを返すかを必ず確認し、アプリケーションが結果を使用する前に、Auth0がユーザーを認証したかどうか判定します。

Phpセクション6「チェックポイント」

以下の点を確認します:

  • ログイン後、nicknameやその他のユーザープロパティをすべて正しく表示できる。

+

ユーザーがログインやログアウトできるようになったら、認証済のユーザーに関連付けられたプロファイル情報を取得できるようにしたいと考えるはずです。たとえば、ログインしたユーザーの名前やプロフィール写真をプロジェクトに表示したいかもしれません。

Auth0 PHP SDKではgetCredentials()メソッドからユーザー情報が提供されます。インタラクティブパネルでprofile.phpコードを確認し、使用方法の例をチェックします。

このメソッドにはユーザーのアイデンティティに関する機密情報が含まれるため、この方法が使用できるかはユーザーの認証ステータスによります。エラーを防ぐため、getCredentials()メソッドがobjectまたはnullを返すかを必ず確認し、アプリケーションが結果を使用する前に、Auth0がユーザーを認証したかどうか判定します。

Phpセクション6「チェックポイント」

以下の点を確認します:

  • ログイン後、nicknameやその他のユーザープロパティをすべて正しく表示できる。

-

Sorry about that. Here's a couple things to double check:

  • You created the profile.php file and are logged in.

Still having issues? Check out our documentation or visit our community page to get more help.

+

すみません。いくつかの点をもう一度確認してください。

  • profile.phpファイルが作成済みで、ログインされている。

まだお困りですか?当社提供のドキュメントまたはコミュニティページで詳しい情報を確認してください。

diff --git a/ja-jp/articles/quickstart/webapp/python/interactive.md b/ja-jp/articles/quickstart/webapp/python/interactive.md index 0c1194035f..410381ee31 100644 --- a/ja-jp/articles/quickstart/webapp/python/interactive.md +++ b/ja-jp/articles/quickstart/webapp/python/interactive.md @@ -6,19 +6,19 @@ files: - files/server - files/templates/home github: - path: https://github.com/auth0-samples/auth0-python-web-app/tree/master/01-Login + path: 01-Login locale: ja-JP --- # Python Flaskアプリケーションにログインを追加する -

Auth0を使用すると、アプリケーションに認証を追加して、ユーザープロファイル情報にアクセスすることができます。このガイドでは、Python FlaskアプリケーションにAuthlib SDKを使ってAuth0を統合する方法を説明します。

+

Auth0を使用すると、アプリケーションに認証を追加して、ユーザープロファイル情報にアクセスすることができます。このガイドでは、Python FlaskアプリケーションにAuthlib SDKを使ってAuth0を統合する方法を説明します。

## Auth0を構成する -

Auth0のサービスを利用するには、Auth0 Dashboadでセットアップしたアプリケーションが必要です。Auth0アプリケーションは、開発中のプロジェクトに対してどのように認証が動作して欲しいかを構成する場所です。

アプリケーションを構成する

対話型のセレクターを使ってAuth0アプリケーションを新規作成するか、統合したいプロジェクトを表す既存のアプリケーションを選択します。Auth0のすべてのアプリケーションには英数字からなる一意のクライアントIDが割り当てられており、アプリケーションのコードがSDKを通じてAuth0 APIを呼び出す際に使用されます。

このクイックスタートを使って構成されたすべての設定は、Dashboardのアプリケーションを自動更新します。今後、アプリケーションの管理もDashboardで行えます。

代わりに完了済みの構成を見てみたい場合は、サンプルアプリケーションをご覧ください。

Callback URLを構成する

Callback URLとは、Auth0がユーザーを認証後にリダイレクトするアプリケーション内URLです。設定されていない場合、ユーザーはログイン後にアプリケーションに戻りません。

サンプルプロジェクトに沿って進めている場合は、http://localhost:3000/callbackに設定してください。

ログアウトURLを構成する

ログアウトURLとは、Auth0がユーザーをログアウト後にリダイレクトするアプリケーション内URLです。設定されていない場合、ユーザーはアプリケーションからログアウトできず、エラーを受け取ります。

サンプルプロジェクトに沿って進めている場合は、http://localhost:3000に設定してください。

+

Auth0のサービスを利用するには、Auth0 Dashboadでセットアップしたアプリケーションが必要です。Auth0アプリケーションは、開発中のプロジェクトに対してどのように認証が動作して欲しいかを構成する場所です。

アプリケーションを構成する

対話型のセレクターを使ってAuth0アプリケーションを新規作成するか、統合したいプロジェクトを表す既存のアプリケーションを選択します。Auth0のすべてのアプリケーションには英数字からなる一意のクライアントIDが割り当てられており、アプリケーションのコードがSDKを通じてAuth0 APIを呼び出す際に使用されます。

このクイックスタートを使って構成されたすべての設定は、Dashboardのアプリケーションを自動更新します。今後、アプリケーションの管理もDashboardで行えます。

代わりに完了済みの構成を見てみたい場合は、サンプルアプリケーションをご覧ください。

Callback URLを構成する

Callback URLとは、Auth0がユーザーを認証後にリダイレクトするアプリケーション内URLです。設定されていない場合、ユーザーはログイン後にアプリケーションに戻りません。

サンプルプロジェクトに沿って進めている場合は、http://localhost:3000/callbackに設定してください。

ログアウトURLを構成する

ログアウトURLとは、Auth0がユーザーをログアウト後にリダイレクトするアプリケーション内URLです。設定されていない場合、ユーザーはアプリケーションからログアウトできず、エラーを受け取ります。

サンプルプロジェクトに沿って進めている場合は、http://localhost:3000に設定してください。

## 依存関係をインストールする @@ -65,7 +65,7 @@ APP_SECRET_KEY= ## アプリケーションをセットアップする {{{ data-action="code" data-code="templates/home.html" }}} -

次に、アプリケーションをセットアップします。プロジェクトディレクトリでserver.pyファイルを作成します。このファイルにはアプリケーションロジックが含まれます。

アプリケーションに必要なすべてのライブラリーをインポートします。

前の手順で作成した構成.envファイルを読み込みます。

Auth0でアプリケーションの認証を処理するためにAuthlibを構成します。AuthlibのOAuth register()メソッドで使用できる構成オプションの詳細については、Authlibのドキュメント

+

次に、アプリケーションをセットアップします。プロジェクトディレクトリでserver.pyファイルを作成します。このファイルにはアプリケーションロジックが含まれます。

アプリケーションに必要なすべてのライブラリーをインポートします。

前の手順で作成した構成.envファイルを読み込みます。

Auth0でアプリケーションの認証を処理するためにAuthlibを構成します。AuthlibのOAuth register()メソッドで使用できる構成オプションの詳細については、Authlibのドキュメント

## ルートをセットアップする {{{ data-action="code" data-code="server.py" }}} @@ -84,10 +84,10 @@ APP_SECRET_KEY=
-

Python手順7「チェックポイント」

検証するにはhttp://localhost:3000を訪問します。ログインのためにAuth0へルートするログインボタンがあり、ログイン後アプリケーションに戻るとプロファイル情報を確認できます。

+

Python手順7「チェックポイント」

検証するにはhttp://localhost:3000を訪問します。ログインのためにAuth0へルートするログインボタンがあり、ログイン後アプリケーションに戻るとプロファイル情報を確認できます。

-

If your application did not start successfully:

  • Verify any errors in the console.

  • Verify the domain and Client ID imported correctly.

  • Verify your tenant configuration.

Still having issues? Check out our documentation or visit our community page to get more help

+

アプリケーションが正常に起動しなかった場合は以下を行います。

  • コンソールでエラーを確認します。

  • ドメインとクライアントIDが正常にインポートされていることを確認します。

  • テナントの構成を確認します。

まだお困りですか?当社提供のドキュメントまたはコミュニティページで詳しい情報を確認してください。

diff --git a/ja-jp/articles/quickstart/webapp/rails/interactive.md b/ja-jp/articles/quickstart/webapp/rails/interactive.md index 2b12c9a50b..22a84ad8ff 100644 --- a/ja-jp/articles/quickstart/webapp/rails/interactive.md +++ b/ja-jp/articles/quickstart/webapp/rails/interactive.md @@ -9,7 +9,7 @@ files: - files/routes - files/secured github: - path: https://github.com/auth0-samples/auth0-rubyonrails-sample/tree/master/sample + path: sample locale: ja-JP --- @@ -21,12 +21,12 @@ locale: ja-JP ## Auth0を構成する -

Auth0のサービスを利用するには、Auth0 Dashboadに設定済みのアプリケーションがある必要があります。Auth0アプリケーションは、開発中のプロジェクトに対してどのように認証が動作して欲しいかを構成する場所です。

アプリケーションを構成する

対話型のセレクターを使ってAuth0アプリケーションを新規作成するか、統合したいプロジェクトを表す既存のアプリケーションを選択します。Auth0のすべてのアプリケーションには英数字からなる一意のクライアントIDが割り当てられており、アプリケーションのコードがSDKを通じてAuth0 APIを呼び出す際に使用されます。

このクイックスタートを使って構成されたすべての設定は、Dashboardのアプリケーションを自動更新します。今後、アプリケーションの管理もDashboardで行えます。

完了済みの構成を見てみたい場合は、サンプルアプリケーションをご覧ください。

Callback URLを構成する

Callback URLとは、Auth0がユーザーを認証後にリダイレクトするアプリケーション内URLです。設定されていない場合、ユーザーはログイン後にアプリケーションに戻りません。

サンプルプロジェクトに沿って進めている場合は、http://localhost:3000/auth/auth0/callbackに設定してください。

ログアウトURLを構成する

ログアウトURLとは、Auth0がユーザーをログアウト後にリダイレクトするアプリケーション内URLです。設定されていない場合、ユーザーはアプリケーションからログアウトできず、エラーを受け取ります。

サンプルプロジェクトに沿って進めている場合は、http://localhost:3000に設定してください。

Allowed Web Origins(許可されているWebオリジン)を構成する

Allowed Web Origin(許可されているWebオリジン)とは、認証フローへのアクセスを許可されるURLです。これにはプロジェクトのURLが含まれている必要があります。適切に設定されていない場合、プロジェクトが認証トークンを暗黙でリフレッシュできず、ユーザーがアプリケーションを再び訪問した時、またはページを再読み込みした時にログアウトした状態になってしまいます。

サンプルプロジェクトに沿って進めている場合は、http://localhost:3000に設定してください。

+

Auth0のサービスを利用するには、Auth0 Dashboadに設定済みのアプリケーションがある必要があります。Auth0アプリケーションは、開発中のプロジェクトに対してどのように認証が動作して欲しいかを構成する場所です。

アプリケーションを構成する

対話型のセレクターを使ってAuth0アプリケーションを新規作成するか、統合したいプロジェクトを表す既存のアプリケーションを選択します。Auth0のすべてのアプリケーションには英数字からなる一意のクライアントIDが割り当てられており、アプリケーションのコードがSDKを通じてAuth0 APIを呼び出す際に使用されます。

このクイックスタートを使って構成されたすべての設定は、Dashboardのアプリケーションを自動更新します。今後、アプリケーションの管理もDashboardで行えます。

完了済みの構成を見てみたい場合は、サンプルアプリケーションをご覧ください。

Callback URLを構成する

Callback URLとは、Auth0がユーザーを認証後にリダイレクトするアプリケーション内URLです。設定されていない場合、ユーザーはログイン後にアプリケーションに戻りません。

サンプルプロジェクトに沿って進めている場合は、http://localhost:3000/auth/auth0/callbackに設定してください。

ログアウトURLを構成する

ログアウトURLとは、Auth0がユーザーをログアウト後にリダイレクトするアプリケーション内URLです。設定されていない場合、ユーザーはアプリケーションからログアウトできず、エラーを受け取ります。

サンプルプロジェクトに沿って進めている場合は、http://localhost:3000に設定してください。

Allowed Web Origins(許可されているWebオリジン)を構成する

Allowed Web Origin(許可されているWebオリジン)とは、認証フローへのアクセスを許可されるURLです。これにはプロジェクトのURLが含まれている必要があります。適切に設定されていない場合、プロジェクトが認証トークンを暗黙でリフレッシュできず、ユーザーがアプリケーションを再び訪問した時、またはページを再読み込みした時にログアウトした状態になってしまいます。

サンプルプロジェクトに沿って進めている場合は、http://localhost:3000に設定してください。

## 依存関係を追加する -

認証フローをハンドリングするには、カスタムOmniAuthストラテジーであるomniauth-auth0を使います。

Gemfileに次の依存関係を追加します:

gem 'omniauth-auth0', '~> 3.0'
+

認証フローをハンドリングするには、カスタムOmniAuthストラテジーであるomniauth-auth0を使います。

Gemfileに次の依存関係を追加します:

gem 'omniauth-auth0', '~> 3.0'
 
 gem 'omniauth-rails_csrf_protection', '~> 1.0' # prevents forged authentication requests
 
@@ -42,12 +42,12 @@ gem 'omniauth-rails_csrf_protection', '~> 1.0' # prevents forged authenticati
 ## OmniAuthミドルウェアを構成する {{{ data-action="code" data-code="auth0.rb" }}}
 
 
-

./config/initializers/auth0.rbという以下のイニシャライザーファイルを作成し、前の手順で作成した構成ファイルでOmniAuthミドルウェアを構成します。

callback_pathがAuth0アプリケーションの[Allowed Callback URLs(許可されているコールバックURL)]にある値と一致することを確認します。

+

./config/initializers/auth0.rbという以下のイニシャライザーファイルを作成し、前の手順で作成した構成ファイルでOmniAuthミドルウェアを構成します。

callback_pathがAuth0アプリケーションの[Allowed Callback URLs(許可されているコールバックURL)]にある値と一致することを確認します。

## Auth0コントローラーを追加する {{{ data-action="code" data-code="auth0_controller.rb" }}} -

ログアウトURLを構築するために、認証コールバック、logoutアクション、メソッドをハンドリングするAuth0コントローラーを作成します。

次のコマンドを実行します:rails generate controller auth0 callback failure logout --skip-assets --skip-helper --skip-routes --skip-template-engine

コールバックメソッドの内部で、(request.env['omniauth.auth']として返された)ユーザー情報のハッシュをアクティブセッションに割り当てます。

ログアウトを構築するため、logoutアクションの内部でreset_sessionメソッドを呼び出し、セッション内に保存されたオブジェクトをすべて消去します。それから、Auth0ログアウトエンドポイントにリダイレクトします。reset_sessionについての詳細は、「Ruby on Rails ActionController」ドキュメントをご覧ください。

+

ログアウトURLを構築するために、認証コールバック、logoutアクション、メソッドをハンドリングするAuth0コントローラーを作成します。

次のコマンドを実行します:rails generate controller auth0 callback failure logout --skip-assets --skip-helper --skip-routes --skip-template-engine

コールバックメソッドの内部で、(request.env['omniauth.auth']として返された)ユーザー情報のハッシュをアクティブセッションに割り当てます。

ログアウトを構築するため、logoutアクションの内部でreset_sessionメソッドを呼び出し、セッション内に保存されたオブジェクトをすべて消去します。それから、Auth0ログアウトエンドポイントにリダイレクトします。reset_sessionについての詳細は、「Ruby on Rails ActionController」ドキュメントをご覧ください。

## ルートを構成する {{{ data-action="code" data-code="routes.rb" }}} @@ -56,14 +56,14 @@ gem 'omniauth-rails_csrf_protection', '~> 1.0' # prevents forged authenticati
-

Sorry about that. Please double-check that the previous steps completed without error.

Still having issues? Check out our documentation or visit our community page to get more help.

+

すみません。エラーが起きることなく以前の手順が完了したことをもう一度確認してください。

まだお困りですか?当社提供のドキュメントまたはコミュニティページで詳しい情報を確認してください。

## アプリケーションにログインを追加する -

ユーザーが/auth/auth0エンドポイントを訪れると、アプリケーションにログインできるようになりました。

偽の認証要求を防ぐためには、link_toまたはbutton_toヘルパーメソッドを:postメソッドと一緒に使います。

<!-- Place a login button anywhere on your application -->
+

ユーザーが/auth/auth0エンドポイントを訪れると、アプリケーションにログインできるようになりました。

偽の認証要求を防ぐためには、link_toまたはbutton_toヘルパーメソッドを:postメソッドと一緒に使います。

<!-- Place a login button anywhere on your application -->
 
 \${ "<\%= button_to 'Login', '/auth/auth0', method: :post %>" }
 
@@ -73,7 +73,7 @@ gem 'omniauth-rails_csrf_protection', '~> 1.0' # prevents forged authenticati
 
   
-

Sorry about that. Here are a couple of things you can check:

  • Ensure that the correct URLs have been set in your Auth0 application as per the first step in this quickstart

  • Check that all the required gems installed correctly

  • Check that the routes have been set up and the Auth0 configuration has been set up in your app

  • Check the logs for any other errors or messages that may have prevented login from working

Still having issues? Check out our documentation or visit our community page to get more help.

+

すみません。いくつかの点をもう一度確認してください。

  • クイックスタートの最初の手順で行ったように、Auth0アプリケーションに正しいURLが設定されていることを確認します

  • すべての必要なgemが正しくインストールされていることを確認します

  • 経路がセットアップされ、アプリにAuth0の構成がセットアップされていることを確認します

  • ログを確認して、ログインの動作を妨げているかもしれない他のエラーやメッセージについて調べます

まだお困りですか?当社提供のドキュメントまたはコミュニティページで詳しい情報を確認してください。

@@ -90,14 +90,14 @@ gem 'omniauth-rails_csrf_protection', '~> 1.0' # prevents forged authenticati
-

Sorry about that. Here are a couple of things you can check:

  • Ensure that the correct URLs have been set in your Auth0 client as per the first step in this quickstart

  • Check that the routes have been set up and the Auth0 configuration has been set up in your app

  • Check the logs for any other errors or messages that may have prevented login from working

Still having issues? Check out our documentation or visit our community page to get more help.

+

すみません。いくつかの点をもう一度確認してください。

  • クイックスタートの最初の手順で行ったように、Auth0クライアントに正しいURLが設定されていることを確認します

  • 経路がセットアップされ、アプリにAuth0の構成がセットアップされていることを確認します

  • ログを確認して、ログインの動作を妨げているかもしれない他のエラーやメッセージについて調べます

まだお困りですか?当社提供のドキュメントまたはコミュニティページで詳しい情報を確認してください。

## ユーザープロファイル情報を表示する {{{ data-action="code" data-code="routes.rb" }}} -

ユーザーのプロファイルを表示するには、アプリケーションに保護されたルートがなければなりません。ルートへのアクセスはConcernで管理でき、複数のコントローラーで共有できます。Concernはユーザーが認証されていない場合、自動的にAuth0にリダイレクトしなければなりません。そうでない場合は、Concernは現在のユーザープロファイルを返します。

Concernができたら、ログインユーザーを必要とするすべてのコントローラーに含めます。その後、次の例のように、session[:userinfo]セッションからユーザーにアクセスできます:

class DashboardController < ApplicationController
+

ユーザーのプロファイルを表示するには、アプリケーションに保護されたルートがなければなりません。ルートへのアクセスはConcernで管理でき、複数のコントローラーで共有できます。Concernはユーザーが認証されていない場合、自動的にAuth0にリダイレクトしなければなりません。そうでない場合は、Concernは現在のユーザープロファイルを返します。

Concernができたら、ログインユーザーを必要とするすべてのコントローラーに含めます。その後、次の例のように、session[:userinfo]セッションからユーザーにアクセスできます:

class DashboardController < ApplicationController
 
   include Secured