Sign in with Lovable

드롭인 버튼이나 표준 OpenID Connect 흐름으로 사람들이 자신의 Lovable 계정을 사용해 사이트에 로그인하게 합니다. 모든 플랜에서 사용할 수 있습니다.

사이트에 Sign in with Lovable(Lovable로 로그인) 버튼을 두면 사람들이 이미 가지고 있는 Lovable 계정으로 로그인할 수 있습니다.

누군가 로그인하면 사이트는 요청한 항목에 따라 그 사람의 이름, 이메일 주소, 사진을 받습니다.

추가하는 방법은 두 가지입니다. SDK는 버튼을 그리고 로그인을 대신 처리하는 스크립트 태그 하나로, 서버가 없는 사이트에서 가장 빠른 방법입니다. OpenID Connect는 이 버튼 뒤에서 동작하는 표준 로그인 프로토콜입니다. 모든 과정을 직접 제어하고 싶다면 자체 서버나 OpenID Connect 라이브러리로 이 흐름을 구동할 수 있습니다.

Sign in with Lovable은 모든 플랜에서 작동하며 사용 비용이 들지 않습니다.

시작하기 전에

두 방법 모두 OAuth 클라이언트에서 시작합니다. Lovable은 OAuth 클라이언트를 통해 로그인 요청이 해당 사이트에서 왔다는 것을 알 수 있습니다. 워크스페이스 소유자나 관리자가 OAuth 클라이언트 등록하기에 따라 Workspace settings → API keys & OAuth → OAuth clients에서 클라이언트를 등록합니다. 등록하면 클라이언트 ID를 받고, Web server 클라이언트라면 클라이언트 시크릿도 받습니다.

등록할 때 내리는 세 가지 선택에 따라 이 페이지의 나머지 내용이 적용되는 방식이 달라집니다.

• Application type. 로그인이 브라우저에서 끝나면 Single-page app을 선택합니다. 서버가 없는 사이트에서 SDK를 사용하는 경우가 여기에 해당합니다. 자체 서버가 로그인 코드를 교환한다면 Web server를 선택합니다. 아래 OpenID Connect 흐름이 여기에 해당합니다. Web server 클라이언트는 서버에만 보관하는 클라이언트 시크릿을 받습니다. 등록한 뒤에는 유형을 변경할 수 없습니다.
• Redirect URIs. SDK를 사용한다면 사이트 주소를 도메인(포트가 있다면 포트)까지만 입력하고, 그 뒤에는 아무것도 붙이지 않으며 끝에 슬래시도 넣지 않습니다. 예를 들면 https://example.com입니다. 버튼이 어느 페이지에 있는지는 상관없습니다. OpenID Connect 흐름이라면 사람들이 돌아올 페이지의 전체 주소를 입력합니다. 예를 들면 https://example.com/callback입니다. Lovable은 등록된 주소로만 사람들을 돌려보냅니다.
• Scopes. openid를 선택하고, 이름과 사진이 필요하면 profile을, 이메일 주소가 필요하면 email을, 처음 8시간이 지난 뒤에도 로그인 상태를 유지하려면 offline을 추가합니다. 각 스코프에 대한 설명은 스코프 참조를 참고하세요.

로그인 방법 선택하기

사이트에 맞는 방법을 고르세요. 어느 방법이든 결과는 같으며, 누가 로그인했는지 알 수 있습니다.

SDK로 버튼 추가하기

SDK는 Lovable이 제공하는 파일 하나입니다. 이 파일이 버튼을 그리고, Lovable 로그인 창을 열고, 로그인한 사람의 정보를 페이지에 전달합니다.

스크립트 추가하기

다음 코드를 페이지에 붙여 넣습니다.

<script type="text/javascript" src="https://sdks.lovable.dev/sign-in-with-lovable/index.js"></script>

버튼 디자인과 Lovable 로고가 함께 제공되므로 스타일시트나 이미지를 추가할 필요가 없습니다.

클라이언트 ID와 버튼 추가하기

페이지의 <head>에 클라이언트 ID를 넣고, 버튼을 표시할 위치에 빈 <div>를 넣습니다. 스크립트가 두 요소를 찾아 버튼을 그려 줍니다.

<html>
  <head>
    <meta name="lovable-signin-client-id" content="YOUR_CLIENT_ID" />
    <meta name="lovable-signin-scope" content="openid profile email offline" />
  </head>
  <body>
    <div id="lovable-signin" data-color="dark" data-type="continue"></div>
    <script type="text/javascript" src="https://sdks.lovable.dev/sign-in-with-lovable/index.js"></script>
  </body>
</html>

scope 줄에는 사용자에게 공유를 요청하는 항목을 나열합니다. 사용자는 정보가 공유되기 전에 이 목록을 확인하고 동의합니다. 각 항목은 공백으로 구분하고, 실제로 사용하는 항목만 요청하며, openid는 항상 포함하세요. 요청하는 모든 스코프는 클라이언트에 등록되어 있어야 합니다.

JavaScript로 설정하기

<head>를 사용하고 싶지 않다면 코드에서 설정하세요. 이 경우 버튼을 그리는 호출도 직접 해야 합니다.

<body>
  <script type="text/javascript" src="https://sdks.lovable.dev/sign-in-with-lovable/index.js"></script>
  <div id="lovable-signin" data-color="dark" data-type="continue"></div>
  <script type="text/javascript">
    LovableID.auth.init({
      clientId: "YOUR_CLIENT_ID",
      scope: "openid profile email offline",
    });

    LovableID.auth.renderButton();
  </script>
</body>

두 방식을 섞어 쓸 수도 있습니다. 코드에서 설정한 값이 우선하고, 코드에서 생략한 값은 <head> 태그의 값을 사용합니다. 따라서 코드에서 스코프만 설정하면 클라이언트 ID는 <head>의 값이 그대로 쓰입니다.

버튼 모양 바꾸기

<div>에 속성을 추가해 버튼을 바꿉니다. 문구와 로고는 Lovable 고유의 것이 유지되므로 사람들이 바로 알아볼 수 있습니다. 이 페이지의 예시는 Continue with Lovable을 사용합니다. 계정이 없는 사람도 로그인하는 과정에서 계정을 만들기 때문에 이 문구는 새 사용자와 기존 사용자 모두에게 어울립니다. 페이지가 항상 로그인이나 가입 중 한 가지 용도로만 쓰인다면 signin이나 signup을 사용하세요. 원본 페이지에서는 SDK가 아래 버튼을 직접 그리므로 항상 현재 디자인을 보여 주며, 버튼을 클릭해도 아무 일도 일어나지 않습니다.

이 중 사이트에 맞는 것이 없다면 자체 버튼을 사용하세요. 그 버튼의 클릭 핸들러에서 LovableID.auth.signIn()을 호출하면 로그인이 시작됩니다.

로그인한 사용자 정보 가져오기

버튼을 클릭하면 Lovable 로그인 창이 열립니다. 사용자가 그 창에서 로그인하면 창이 닫히고, SDK가 사용자 정보를 담은 이벤트를 페이지에서 발생시킵니다.

document.addEventListener("LovableSignInOnSuccess", (event) => {
  console.log(event.detail.user);
});

document.addEventListener("LovableSignInOnFailure", (event) => {
  console.log(event.detail.code);
});

event.detail.user에는 요청한 정보가 담깁니다.

{
  "sub": "string",
  "email": "string",
  "emailVerified": true,
  "name": "string",
  "picture": "string"
}

sub는 해당 사용자에 대해 절대 바뀌지 않으므로, 자체 기록을 관리한다면 이 값을 저장하세요. 이름이나 이메일은 바뀔 수 있으므로 사람을 구별하는 데 사용하지 마세요.

event.detail.code는 로그인이 완료되지 않은 이유를 알려 줍니다. 대개는 사용자가 창을 닫았거나, 계속하지 않기로 했거나, 브라우저가 창을 차단한 것처럼 평범한 이유입니다. 그 밖의 코드는 Lovable이 로그인을 안전하게 완료할 수 없었다는 뜻이며, 어느 경우든 로그인된 사람은 없습니다.

로그인 상태는 사용자의 브라우저에 기억되므로 페이지를 새로 고쳐도 로그인 상태가 유지됩니다. 언제든 로그인 상태를 확인하려면 다음 코드를 사용합니다.

const user = LovableID.auth.getInstance().getUser();

사이트에 서버가 있더라도 버튼에만 SDK를 사용할 수 있습니다. 버튼이 서버의 페이지를 가리키게 하고 서버가 OpenID Connect 흐름을 실행하게 하세요. 이렇게 하면 로그인과 관련된 어떤 정보도 브라우저에 보관되지 않습니다.

LovableID.auth.renderButton({ onClick: () => (window.location.href = "/login") });

OpenID Connect로 직접 로그인 구현하기

Sign in with Lovable은 표준 OpenID Connect provider이므로 어떤 OpenID Connect 라이브러리와도 함께 작동합니다. https://lovable.dev/oauth/.well-known/openid-configuration의 discovery 문서, 클라이언트 ID, 리디렉션 URI, 스코프로 라이브러리를 구성하세요. 아래 단계는 라이브러리나 직접 작성한 코드가 수행하는 작업입니다. 이 단계는 PKCE와 함께 인가 코드(authorization code) 흐름을 사용합니다. Lovable은 시크릿이 있는 Web server 클라이언트를 포함해 모든 클라이언트에 PKCE를 요구합니다.

이 단계에서 호출하는 엔드포인트는 OAuth 엔드포인트에 나와 있습니다.

https://lovable.dev/oauth/authorize
  ?client_id=YOUR_CLIENT_ID
  &redirect_uri=https://example.com/callback
  &response_type=code
  &scope=openid%20profile%20email
  &state=STATE
  &nonce=NONCE
  &code_challenge=CODE_CHALLENGE
  &code_challenge_method=S256

https://example.com/callback?code=CODE&state=STATE

curl -X POST https://lovable.dev/oauth/token \
  -H "Content-Type: application/x-www-form-urlencoded" \
  -u "YOUR_CLIENT_ID:YOUR_CLIENT_SECRET" \
  -d grant_type=authorization_code \
  -d code=CODE \
  -d redirect_uri=https://example.com/callback \
  -d code_verifier=CODE_VERIFIER

{
  "access_token": "string",
  "token_type": "bearer",
  "expires_in": 28800,
  "id_token": "string",
  "refresh_token": "string",
  "scope": "openid profile email offline"
}

로그인 상태 유지하기

액세스 토큰은 8시간 동안 유효합니다. 스코프에 offline을 포함하면 리프레시 토큰도 받습니다. 리프레시 토큰을 사용하면 사용자를 Lovable로 다시 보내지 않고 새 액세스 토큰을 발급받을 수 있습니다.

curl -X POST https://lovable.dev/oauth/token \
  -H "Content-Type: application/x-www-form-urlencoded" \
  -u "YOUR_CLIENT_ID:YOUR_CLIENT_SECRET" \
  -d grant_type=refresh_token \
  -d refresh_token=REFRESH_TOKEN

응답 형식은 첫 번째 토큰 응답과 같습니다. 새 refresh_token이 포함될 수도 있고 포함되지 않을 수도 있습니다. 포함되어 있다면 저장해 두고 이후로는 그 토큰을 사용하세요. 리프레시 토큰이 만료되어 갱신에 실패하면 사용자가 다시 로그인합니다. Single-page app 클라이언트는 Basic 자격 증명 대신 client_id를 폼 필드로 보냅니다.

사용자가 로그아웃하면 같은 클라이언트 자격 증명으로 리프레시 토큰을 https://lovable.dev/oauth/revoke에 POST 요청으로 보내 Lovable 쪽에서도 토큰이 작동하지 않게 하세요.

FAQ

관련 주제

• 앱에 Sign in with Lovable 추가하기
• 사용자 및 인증
• 워크스페이스 Single Sign-On (SSO) 설정하기
• Lovable Cloud 앱에 SAML SSO 추가