API/SPA에 대한 사용자 등록

Question

API 및 해당 API를 사용하는 별도의 프런트 엔드 앱을 만들고 있습니다. 필자의 경우 API API에는 Laravel Passport을, 프론트 엔드 앱에는 VueJS를 사용하고 있습니다. 계정을 만들 수있는 사용자에 대한 위해

, 전달하는 client_secret (https://laravel.com/docs/5.3/passport#password-grant-tokens)을 필요로하는 API에 대한 경로 (/oauth/token)에 대한 사용자해야 POST. 내가 볼

유일한 옵션은 다음과 같습니다

1. 은 client_secret 내 프론트 엔드 응용 프로그램에서 헤더로 전송 가졌어요. 그러나이 토큰을 열어 두는 것이 현명하지는 않습니다.
2. client_secret을 전혀 필요로하지 마십시오. 이것은 옵션 1보다 훨씬 좋아 보이지 않습니다.
3. 내 프런트 엔드 앱에 client_secret을 안전하게 저장할 수있는 동적 페이지를 만든 다음 API로 보냅니다. 이것은 분명히 가장 안전하지만 완전히 정적 인 프론트 엔드 (SPA)의 목적을 부분적으로 무효화하는 것 같습니다.

이러한 유형의 접근 방식에 가장 좋은 방법은 무엇입니까? API 및 SPA를 통해이 문제가 어떻게 다루어 지는지에 대해 조사했지만 올바른 방향으로 나를 가리키고있는 것을 발견하지 못했습니다.

Answer 1

나는 같은 문제를 겪었고,이 문제에 관해 더 많은 문서를 찾지 못했습니다.

내가 한 일은 여기까지입니다. 지금까지 멋진 일을하고있는 것 같아요, 당신이 틀린 것을 보게되면 저에게 말해 줄 수 있습니다.

내 앱의 경우, 내 앱의 각 '클라이언트'에 대해 즉석에서 만드는 비밀번호 부여 클라이언트를 사용하게됩니다. 고객이란 브라우저 나 모바일 앱 등을 의미합니다.

각 브라우저는 시작할 때 localStorage (또는 쿠키 등)에 client_id 및 client_secret이 있는지 확인합니다. 그런 다음, 그렇지 않으면 API의 엔드 포인트를 호출하여 암호 권한 부여 클라이언트를 작성하고 정보를 브라우저로 리턴합니다.

브라우저는이 새로운 클라이언트 정보와 그의 자격 증명을 사용하여 사용자를 로그인 할 수 있습니다. 클라이언트의 이름으로, 나는 브라우저의 사용자 에이전트를 저장하려고

<?php 

namespace App\Http\Controllers\Api; 

use App\Http\Controllers\Controller; 
use Illuminate\Contracts\Hashing\Hasher; 
use Illuminate\Http\Request; 
use Laravel\Passport\ClientRepository; 

class AuthController extends Controller 
{ 
    protected $hasher; 

    protected $clients; 

    public function __construct (Hasher $hasher, ClientRepository $clients) 
    { 
     $this->hasher = $hasher; 
     $this->clients = $clients; 
    } 

    public function makeClient (Request $request) 
    { 
     $client = $this->clients->create(null,$request->header('User-Agent','Unknown Device'), '', false, true); 

     return $client->makeVisible('secret'); 
    } 
} 

당신이 볼 수 있듯이 : 여기

내가 암호 부여 클라이언트를 만드는 데 사용하는 컨트롤러입니다. 따라서 모든 고객에게 내 고객에게 페이지를 표시 할 수 있으며 다음과 같은 일부 고객의 자격을 취소 할 수있는 권한을 부여 할 수 있습니다.

"Google Chrome, New York" 또한 클라이언트 IP를 저장하거나 장치의 클라이언트 유형을보다 정확하게 식별 할 수있는 항목을 저장할 수 있습니다.

Answer 2

Laravel Passport 구성 요소는 OAuth2 Framework Protocol을 잘못 구현 한 것으로 보입니다.

client_id 및 client_secret 매개 변수는 권한 유형의 일부가 아닙니다. 리소스 소유자 암호 자격 증명 부여 유형의 경우 필요한 매개 변수는 username 및 password입니다 (RFC6749 section 4.3.2 참조).

client_id 및 client_secret은 본문 매개 변수 (RFC6749 section 2.3.1 참조)를 통해 자격 증명을 보내는 기밀 클라이언트를 인증하는 데 사용됩니다. Laravel Passport 구성 요소는 다른 클라이언트 인증 구성표 (특히 HTTP 기본 인증 구성표)를 허용해야합니다. RFC6749는 두 매개 변수를 사용하여 요청 바디의 클라이언트 자격 증명을 포함

하지 않는 것이 좋습니다 직접 HTTP 기본 인증 방식

을 활용할 수없는 클라이언트로 제한되어야 함을 나타냅니다 OpenID Connect Core 사양에는 이러한 스키마 중 일부가 its section 9에 나와 있습니다. RFC6749는 공용 클라이언트 (예 : SPA)가 토큰 엔드 포인트에 대해 인증하는 방법을 나타내지 않습니다. 그들은 클라이언트 인증을 필요로하지 않는 암시 적 부여 유형을 사용하기로되어 있습니다.

어쨌든 해결책은 일종의 프록시를 사용하는 것일 수 있습니다. 이 프록시는 서버에 설치해야합니다. SPA에서 모든 요청을 수신하고 (클라이언트 비밀 번호없이) 클라이언트 비밀 번호를 추가하고 수정 된 요청을 Laravel Passport 엔드 포인트로 전송합니다. 그런 다음 응답이 SPA로 전송됩니다. 이렇게하면 SPA는 고객의 비밀을 노출하지 않습니다.

Answer 3

더 간단한 방법은 여권 자체를 실행하는 Laravel 앱 (API를 통해 프론트 엔드 Vuejs 앱 사용 안함)으로 사용자 등록을 처리하는 것입니다.
사용자가 등록되고 로그인하면 Passport의 CreateFreshApiToken 미들웨어를 사용하여 프론트 엔드 응용 프로그램을로드하는 동안 사용자의 쿠키에 토큰을 추가 할 수 있습니다. client_secret에 더 이상 문제가 없습니다.

또한 oauth/token 내가 생각 사용자를 만들지 않습니다 https://laravel.com/docs/5.3/passport#consuming-your-api-with-javascript 및 https://mattstauffer.co/blog/introducing-laravel-passport#super-powered-access-to-the-api-for-frontend-views

를 참조하십시오? 토큰 (암호 부여 클라이언트 용) 또는 인증 코드 (인증 코드 부여 클라이언트)를 전달해야합니다.