Laravel에서 Auth0의 사용자 정의 서명 업데이트가 시도되었습니다.

입문

최근 Auth0을 사용하기 시작했습니다. 오랜만에 좋은 서비스를 만나 주셔서 매일 감사합니다.
그중에 Auth0을 사용해서 조금 막힌 청년이 있는데 소개해 드리려고 합니다.
구현 예는 Laravel을 사용하지만, 나는 점이 어떤 언어에서도 변하지 않을 것이라고 생각한다.

개요

Auth0는 인증 중심의 생태계를 제공하는 위탁 관리 서비스다.
사용자 등록, 로그인, 로그아웃, 메일 검증, 2급 인증 등 각종 용례를 지원합니다.
Auth0으로 구현하고 싶은 것은 SignUp 시 추가 정보 입력 절차입니다.
즉, Auth0의 기본 SignUp에서는 이메일과 비밀번호 또는 Social Provider에 등록된 정보만 얻을 수 있습니다.
응용 프로그램에 따라 부족한 정보를 입력하라는 메시지가 표시되거나 SignUp에 필요한 정보가 존재할 수 있습니다.
Auth0 Rules를 사용하여 이러한 SignUp 시 추가 정보 입력 흐름을 구현했습니다.

사용자 정의 정현 위로 이동

Auth0에서 사용자 정의 SignUp을 구현하는 방법에는 여러 가지가 있습니다.
공식 문서에 기재되어 있다 방법은 다음과 같은 세 가지가 있다.

사용자 정의 Auth0의 SignUp 페이지

스스로 로그인 페이지를 만들고 관리

다른 페이지에서 방향 재정의

Progressive Profiling

여러 가지 방법을 보겠습니다.

1. Auth0의 SignUp 페이지 사용자 정의

1. Auth0에서 관리되는 중앙 인증 서버에 입력한 항목을 사용자 정의할 수 있습니다.
Auth0에서 제공하는 Lock이라는 라이브러리를 사용하면 간단하게 항목을 추가할 수 있습니다.
그러나 여러 응용 프로그램에서 사용되는 용례라면 응용 프로그램의 고유한 항목을 넣으면 상당히 복잡한 처리를 해야 한다.
또한 Social Provider에서 SignUp을 사용할 때는 해당되지 않으므로 주의해야 합니다.

2. 로그인 페이지를 직접 만들고 관리합니다.

Lock은 필요한 UI/UX를 구현할 수 없습니다!만약 그렇다면 로그인 페이지를 직접 만들 수도 있습니다.Auth0의 API를 사용하여 인증됩니다.
사용자 인터페이스를 직접 만들면 많은 복잡한 인증 과정을 실현할 수 있습니다.
그러나 Auth0이 준비한 인증 생태계도 일부 사용하지 못해 설치 비용이 드는 단점이 있다.
참고로 Lock과 Custom UI공식 문서에서 비교에 대해서는 관심 있으신 분들은 참고하시기 바랍니다.

3. 다른 페이지에서 복사

이번에 채택한 것이 바로 이 방법이다.
Auth0의 위탁 관리 로그인 페이지에서 로그인한 후 자신이 위탁 관리하는 추가 정보 입력 페이지로 방향을 바꾸어 정보를 입력하십시오.
이 방법을 사용하면 Auth0 기능을 대량으로 사용하면서 사용자에게 자신의 응용 프로그램에 대한 맞춤형 추가 항목을 입력하도록 요구할 수 있습니다.
또한 Social Provider를 통한 SignUp이든 Email/PW를 통한 SignUp이든 같은 절차에서 다른 항목을 입력할 수 있습니다.
이것의 실현 방법에 관하여.그것은 공식 문서에 나타난다 .

4.Progressive Profiling

SignUp은 최소한의 정보만 요구하고, 다음에 로그인할 때와 방문할 때 추가로 정보를 찾는 것이 Progressive 프로파일링입니다.
이름도 멋있고 등록률도 높아지는 방법이지만 UX 디자인의 문턱이 좀 높은 것 같아서 이번에 배웅했습니다.
Progressive Profiling의 예도 Auth0의 공식 문서 제공 입니다.
관심 있는 사람은 참조하세요.

Redirect에서 SignUp 사용자 정의

로그인 중에 Auth0에서 방향을 바꾸려면 Auth0Rules라는 서비스를 사용하십시오.
Auth0 Rules는 인증 영패를 발행하기 전에 호출된 서버 함수입니다.
Rules 의 Redirect 를 사용하는 SignUp 절차는 다음과 같습니다.

그림7.에서 "Auth0Rules"를 사용하여 "사용자 정의 SignUp"페이지로 리디렉션합니다.
인증이 일시 중지되므로 사용자가 여기서 종료하면 인증 상태가 되지 않습니다.
(실제로 6. 사용자는 Auth0에서 만든 것 같다)
검증 흐름을 복구하려면 https://{YOUR_AUTH0_DOMAIN}/continue?state={STATE} 에 요청을 보내야 합니다.state 매개변수에 대한 정보는 7. 방향을 재정의할 때 URL의 질의 매개변수에 달라집니다.)
유효성 검사 흐름이 재부팅되고 후속 처리가 성공적으로 완료되면 유효성 검사 흐름이 커밋되고 로그인 상태가 됩니다.

규칙 작성

규칙을 실제로 작성합니다.
Auth0 계정이 생성되었다고 가정합니다.

Auth0의 Dashboard 측면 메뉴에서 Rules 을 클릭합니다.

CREATE RULE를 클릭하고 Empty rule

을 선택합니다.

Script에 다음 코드 붙여넣기

function (user, context, callback) {
  const hasConsented = user.app_metadata && user.app_metadata.has_consented;

  if (!hasConsented && context.protocol !== 'redirect-callback') {
    // urlはアプリケーションのURLに差し替える
    context.redirect = { url: 'http://localhost:3000/signup' };
  }

  if (!hasConsented && context.protocol === 'redirect-callback') {
    user.app_metadata = { has_consented:  true };
    user.user_metadata = context.request.body;
    auth0.users.updateAppMetadata(user.user_id, user.app_metadata);
    auth0.users.updateUserMetadata(user.user_id, user.user_metadata);
  }

  callback(null, user, context);
}

저장하고 준비할게요.
6 행context.redirect = {url }에 Redirect 대상 URL이 지정됩니다.
두 번째if의 내용은 https://{YOUR_AUTH0_DOMAIN}/continue?state={STATE}에 보낸 후의 처리를 요청하는 것이다.
검증 프로세스가 계속되면 context.protocol 에 값 redirect-callback 을 삽입합니다.
여기에서 사용자 정의 서명이 완료된 사용자인지 판단하기 위해 app_metadata 에 { has_consented: true } 값을 추가했습니다.

Laravel Application 측면

리디렉션에 영향을 받는 탭 응용 프로그램을 만듭니다.
이미 등급을 설정한 전제에서 진행하다.
(아직 설치되지 않은 사람은 참고하세요여기.

<?php

# routes/web.php

Route::get('/signup', SignupController@main)->name('signup');
Route::post('/signup', SignupController@signup);

<?php

# app/Http/Controllers/SignupController.php

namespace App\Http\Controllers;

use App\Http\Controllers\Controller;
use Illuminate\Http\Request;

class SignupController extends Controller
{
    public function main(Request $request) {
        $state = $request->input('state');

        // formにstateの値をhiddenで入れる
        return view('signup', ['state' => $state]);
    }

    public function signup(Request $request) {
        $state = $request->input('state');
        $config = config('laravel-auth0');
        $url = 'https://'.$config['domain'].'/continue?state='.$state;
        return redirect($url, '307');
    }
}

여기서 주의사항은 /continue 리디렉션을 진행할 때 redirect($url, '307') 로 설정하는 것이다.
두 번째 매개변수는 Http 상태 코드를 지정합니다.
laravel의 redirect()는 기본적으로 302 로 방향을 바꾸지만, 302 방향을 바꾸면 브라우저 측이 GET 요청으로 임의로 전환하여 요청을 보내므로 POST의 Body는 모두 사라집니다.
따라서 307를 통해 Http 상태 코드를 리디렉션하여 자체 검사한 상태에서 리디렉션 측에 요청을 보낼 수 있고 Body의 정보를 순조롭게 전달할 수 있다.signup() 방향을 바꾸면 Auth0의 Rules가 다시 점화됩니다.
여기에서 보안 인증이 끝난 후 지정한 리셋 URL은 영패를 가지고 방향을 바꾸어 로그인 상태의 사이즈가 됩니다.

총결산

Laravel을 사용하여 Auth0에 대한 사용자 정의 서명을 시도합니다.
이제 사용자 정의 서명을 사용하여 프로그램에 특정한 입력 항목을 지원할 수 있으며, Redirect의 경우 Social Provider에서 서명한 사용자도 지원할 수 있습니다.
조금만 있으면 사용자 정의 서명을 할 수 있다는 Auth0의 대단함은 놀랍다.
하지만 인증이 다시 시작될 때의 설치에 관해서는 문헌이 많지 않아서 푹 빠졌지만 좋은 해결 방법을 찾을 수 있어서 다행이다.
단, Http 상태 코드307를 지원하지 않는 브라우저(특히 이동 우려)가 존재할 수도 있습니다. 그곳에 대해서는 아직 조사가 되지 않았으니 실제 사용 시 주의하십시오...
(RFC에서 규정한 것이기 때문에 나는 문제없다고 생각한다...일단).