DeenruvDeenruv
Budowanie sklepu

Konta klientów

Dowiedz się, jak zaimplementować rejestrację klientów, logowanie, wylogowywanie, weryfikację email i resetowanie hasła w sklepie.

Klienci mogą rejestrować konta, co daje im możliwość:

  • Przeglądania wcześniejszych zamówień
  • Przechowywania wielu adresów
  • Utrzymywania aktywnego zamówienia na wielu urządzeniach
  • Korzystania z pluginów, które udostępniają funkcjonalność tylko zarejestrowanym klientom, takie jak listy życzeń i punkty lojalnościowe.

Pobieranie danych aktywnego klienta

Zapytanie activeCustomer zwróci obiekt Customer, jeśli klient jest zarejestrowany i zalogowany, w przeciwnym razie zwróci null. Może to być używane na przykład w nagłówku sklepu, aby określić, czy wyświetlić link „zaloguj się" czy „moje konto".

query GetCustomerAddresses {
    activeCustomer {
        id
        title
        firstName
        lastName
        emailAddress
    }
}
{
    "data": {
        "activeCustomer": {
            "id": "12345",
            "title": "Mr.",
            "firstName": "John",
            "lastName": "Doe",
            "emailAddress": "[email protected]"
        }
    }
}

Logowanie i wylogowywanie

Mutacja login służy do próby zalogowania za pomocą adresu email i hasła. Po podaniu prawidłowych danych uwierzytelniających rozpocznie się nowa uwierzytelniona sesja dla tego klienta.

mutation LogIn($emailAddress: String!, $password: String!, $rememberMe: Boolean!) {
    login(username: $emailAddress, password: $password, rememberMe: $rememberMe) {
        ... on CurrentUser {
            id
            identifier
        }
        ... on ErrorResult {
            errorCode
            message
        }
    }
}
{
    "emailAddress": "[email protected]",
    "password": "**********",
    "rememberMe": true
}
{
    "data": {
        "login": {
            "id": "12345",
            "identifier": "[email protected]"
        }
    }
}

Mutacja logout kończy uwierzytelnioną sesję klienta.

mutation LogOut {
    logout {
        success
    }
}
{
    "data": {
        "logout": {
            "success": true
        }
    }
}

Mutacja login, jak również następujące mutacje związane z rejestracją i odzyskiwaniem hasła, mają zastosowanie tylko w przypadku korzystania z wbudowanej strategii NativeAuthenticationStrategy.

Jeśli używasz alternatywnych strategii uwierzytelniania w swoim sklepie, użyłbyś mutacji authenticate, jak opisano w przewodniku o uwierzytelnianiu zewnętrznym.

Rejestracja konta klienta

Mutacja registerCustomerAccount służy do rejestracji nowego konta klienta.

Istnieją trzy możliwe przepływy rejestracji: Jeśli authOptions.requireVerification jest ustawione na true (domyślnie):

  1. Klient jest rejestrowany z hasłem. Zostanie utworzony verificationToken (i zazwyczaj wysłany emailem do klienta). Ten verificationToken zostanie następnie przekazany do mutacji verifyCustomerAccount bez hasła. Klient jest wtedy zweryfikowany i uwierzytelniony w jednym kroku.
  2. Klient jest rejestrowany bez hasła. Zostanie utworzony verificationToken (i zazwyczaj wysłany emailem do klienta). Ten verificationToken zostanie następnie przekazany do mutacji verifyCustomerAccount z wybranym hasłem klienta. Klient jest wtedy zweryfikowany i uwierzytelniony w jednym kroku.

Jeśli authOptions.requireVerification jest ustawione na false:

  1. Klient musi być zarejestrowany z hasłem. Nie są potrzebne żadne dodatkowe działania — klient może natychmiast się uwierzytelnić.

Oto diagram drugiego scenariusza, w którym hasło jest podawane podczas kroku weryfikacji.

Oto jak wyglądałyby mutacje dla powyższego przepływu:

mutation Register($input: RegisterCustomerInput!) {
    registerCustomerAccount(input: $input) {
        ... on Success {
            success
        }
        ... on ErrorResult {
            errorCode
            message
        }
    }
}
{
  "input": {
    "title": "Mr.",
    "firstName": "Nicky",
    "lastName": "Wire",
    "emailAddress": "[email protected]",
    "phoneNumber": "1234567"
  }
}
{
    "data": {
        "registerCustomerAccount": {
            "success": true
        }
    }
}

Zwróć uwagę, że w powyższych zmiennych nie podaliśmy hasła, ponieważ zostanie ono podane w kroku weryfikacji. Jeśli hasło zostanie podane na tym etapie, nie będzie potrzebne w kroku weryfikacji. To jest decyzja, którą możesz podjąć w oparciu o pożądane doświadczenie użytkownika Twojego sklepu.

Po rejestracji EmailPlugin wygeneruje email do klienta zawierający link do strony weryfikacji. W domyślnej instalacji Deenruv jest to ustawione w pliku konfiguracyjnym:

src/deenruv-config.ts
EmailPlugin.init({
    route: 'mailbox',
    handlers: defaultEmailHandlers,
    templatePath: path.join(__dirname, '../static/email/templates'),
    outputPath: path.join(__dirname, '../static/email/output'),
    globalTemplateVars: {
        fromAddress: '"Deenruv Demo Store" <[email protected]>',
        verifyEmailAddressUrl: 'https://demo.deenruv.com/storefront/account/verify',
        passwordResetUrl: 'https://demo.deenruv.com/storefront/account/reset-password',
        changeEmailAddressUrl: 'https://demo.deenruv.com/storefront/account/change-email-address'
    },
    devMode: true,
}),

Strona weryfikacji musi pobrać token z ciągu zapytania i przekazać go do mutacji verifyCustomerAccount:

mutation Verify($password: String!, $token: String!) {
    verifyCustomerAccount(password: $password, token: $token) {
        ... on CurrentUser {
            id
            identifier
        }
        ... on ErrorResult {
            errorCode
            message
        }
    }
}
{
    "password": "*********",
    "token": "MjAxOS0xMC0wMlQxNToxOTo1NC45NDVa_1DYEWYAB7S3S82JT"
}
{
    "data": {
        "verifyCustomerAccount": {
            "id": "123",
            "identifier": "[email protected]"
        }
    }
}

Resetowanie hasła

Oto jak zaimplementować przepływ resetowania hasła. Koncepcyjnie jest bardzo podobny do opisanego powyżej przepływu weryfikacji.

Resetowanie hasła jest inicjowane przez mutację requestPasswordReset:

mutation RequestPasswordReset($emailAddress: String!) {
    requestPasswordReset(emailAddress: $emailAddress) {
        ... on Success {
            success
        }
        ... on ErrorResult {
            errorCode
            message
        }
    }
}
{
    "emailAddress": "[email protected]"
}
{
    "data": {
        "requestPasswordReset": {
            "success": true
        }
    }
}

Ponownie, ta mutacja wywoła zdarzenie, które domyślne handlery email w EmailPlugin przechwycą i wyślą email do klienta. Strona resetowania hasła musi następnie pobrać token z adresu URL i przekazać go do mutacji resetPassword:

mutation ResetPassword($token: String!, $password: String!) {
    resetPassword(token: $token, password: $password) {
        ... on CurrentUser {
            id
            identifier
        }
        ... on ErrorResult {
            errorCode
            message
        }
    }
}
{
    "token": "MjAxOS0xMC0wMlQxNToxOTo1NC45NDVa_1DYEWYAB7S3S82JT",
    "password": "************"
}
{
    "data": {
        "resetPassword": {
            "id": "123",
            "identifier": "[email protected]"
        }
    }
}

Na tej stronie