Inloggning med sociala medier för kundkonton

Utöver den lösenordslösa inloggningen som är standard för kundkonton kan du ansluta dina Google- och Facebook-konton för att låta kunder logga in med sina inloggningsuppgifter för sociala medier.

Att aktivera inloggning med sociala medier för kundkonton kan ge kunderna en snabbare inloggningsupplevelse via bekanta autentiseringsmetoder. Du kan aktivera flera inloggningsmetoder för sociala medier i din butik.

Om du har anslutit din egen identitetsleverantör till kundkonton och du vill ansluta inloggning med sociala medier måste du kontakta din externa identitetsleverantör.

Överväganden för anslutning av inloggning med sociala medier till kundkonton

Gå igenom följande överväganden för anslutning av inloggning med sociala medier till kundkonton:

  • Du måste ha ett utvecklarkonto för den leverantör som du vill ansluta till kundkonton.
  • Den enda kunddata som synkroniseras till Shopify när du använder inloggning med sociala medier är kundens e-postadress.

Anslut Google till kundkonton

För att ansluta Google till kundkonton måste du slutföra följande uppgifter i ordning:

Under konfigureringen måste du växla mellan webbläsarflikar för Google Cloud Console och Shopify admin. Du måste ha ett konfigurerat Google Cloud-konto för att ansluta Google till kundkonton. Läs mer om Google Cloud i Googles hjälpdokumentation.

Steg 1: Öppna sidan Logga in med Google i Shopify admin

  1. I Shopify admin går du till Inställningar > Kundkonton.

  2. I avsnittet Autentisering klickar du på Hantera.

  3. Klicka på Anslut bredvid Google för att öppna sidan Logga in med Google.

Den här sidan innehåller information som du förväntas kopiera och klistra in när du konfigurerar din Google-apps OAuth-klient, så låt sidan vara öppen i en separat webbläsarflik.

Steg 2: Skapa en app i Google Cloud Console

  1. Logga in på Google Cloud Console i en annan webbläsarflik.
  2. Välj ett befintligt projekt eller skapa ett nytt. Du omdirigeras till projektets instrumentpanel.
  3. Klicka på Meny och klicka sedan på API:er och tjänster > Inloggningsuppgifter.
  4. Klicka på Konfigurera medgivandeskärm > Kom igång.
  5. Fyll i informationen för projektets OAuth-konfiguration:
    1. Ge appen ett namn som en kund skulle känna igen, till exempel namnet på din webbshop. Ange din e-postadress för teknisk support och klicka sedan på Nästa.
    2. I avsnittet Målgrupp väljer du Extern och klickar sedan på Nästa.
    3. Ange en kontakt-e-postadress för eventuella meddelanden som Google kan ha om projektet och klicka sedan på Nästa.
    4. Godkänn Googles användardatapolicy för API-tjänster och klicka sedan på Fortsätt.
    5. Klicka på Skapa.
  6. Konfigurera appens policyinformation som visas för kunder på medgivandeskärmen:
    1. Klicka på Varumärke.
    2. I avsnittet Appdomän inkluderar du en länk till din startsida, en länk till din offentliga integritetspolicy och en länk till dina användarvillkor. Läs mer om att skapa butikspolicyer.

Steg 3: Konfigurera appens OAuth-klient i Google Cloud Console

I det här steget måste du kopiera information från avsnittet Konfigureringsinstruktioner på sidan Logga in med Google i Shopify admin och klistra in dem i lämpliga fält i din flik för Google Cloud Console.

  1. I ditt projekts app i Google Cloud Console klickar du på Översikt.
  2. I avsnittet Mätvärden klickar du på Skapa OAuth-klient.
  3. Konfigurera OAuth-klientens uppgifter:
    1. I rullgardinsmenyn Applikationstyp väljer du Webbapplikation.
    2. Ange ett namn i fältet Namn.
  4. Konfigurera Auktoriserade Javascript-ursprung för appen:
  5. I avsnittet Auktoriserade Javascript-ursprung klickar du på + Lägg till URI.
  6. Kopiera värdet för Auktoriserade Javascript-ursprung på sidan Logga in med Google i Shopify admin.
  7. Klistra in värdet i fältet URI:er 1 i Google Cloud Console.
  8. Om du har mer än en URI i avsnittet Auktoriserat Javascript i Shopify admin, upprepar du de här stegen för de extra URI-fälten.
  9. Konfigurera Auktoriserade omdirigerings-URI:er för appen:
  10. I avsnittet Auktoriserade omdirigerings-URI:er i Google Cloud Console klickar du på + Lägg till URI.
  11. Kopiera värdet för Auktoriserad omdirigerings-URI i webbläsarfliken med Shopify admin.
  12. Gå tillbaka till Google Cloud Console och klistra in värdet i fältet URI:er 1.
  13. Om du har mer än en URI i avsnittet Auktoriserad omdirigerings-URI i Shopify admin, upprepar du de här stegen för de extra URI-fälten.
  14. I Google Cloud Console klickar du på Skapa.

Låt dialogrutan OAuth-klient skapad som visas vara öppen till Steg 4: Konfigurera inloggningsuppgifterna i Shopify admin eftersom du måste kopiera och klistra in information från Google Cloud Console till Shopify admin.

Steg 4: Konfigurera inloggningsuppgifterna i Shopify admin

  1. Kopiera Klient-ID från dialogrutan OAuth-klient skapad i Google Cloud Console.
  2. Klistra in Klient-ID i avsnittet Inloggningsuppgifter på sidan Logga in med Google i Shopify admin.
  3. Kopiera Klienthemlighet från dialogrutan OAuth-klient skapad i Google Cloud Console.
  4. Klistra in Klienthemlighet i avsnittet Inloggningsuppgifter på sidan Logga in med Google i Shopify admin.
  5. Klicka på Spara på sidan Logga in med Google i Shopify admin.

Steg 5: Publicera din app i Google Cloud Console

  1. Klicka på Målgrupp i ditt projekts app i Google Cloud Console.
  2. Klicka på Publicera app.

Anslut Facebook till kundkonton

För att ansluta Facebook till kundkonton måste du slutföra följande uppgifter i tur och ordning:

Under konfigureringen måste du växla mellan webbläsarflikarna för din Meta for Developers-instrumentpanel och Shopify admin. För att ansluta Facebook till kundkonton måste du ha ett Meta Developer-konto. Läs mer om hur du registrerar dig som Meta Developer.

Steg 1: Öppna sidan Logga in med Facebook i Shopify admin

  1. I Shopify admin går du till Inställningar > Kundkonton.

  2. I avsnittet Autentisering klickar du på Hantera.

  3. Klicka på Anslut bredvid Facebook för att öppna sidan Logga in med Facebook.

Steg 2: Skapa en app i din Meta for Developers-instrumentpanel

  1. Gå till Meta for Developers-instrumentpanelen i en separat webbläsarflik och klicka sedan på Logga in för att logga in. Om du inte har konfigurerat ett Meta Developer-konto måste du skapa ett nytt konto från inloggningssidan innan du fortsätter till nästa steg.
  2. Klicka på Appar.
  3. Klicka på Skapa app.
  4. Fyll i fälten Appnamn och Appens kontakt-e-postadress och klicka sedan på Nästa.
  5. På sidan Lägg till användningsfall väljer du Autentisera och begär data från användare med Facebook-inloggning och klickar sedan på Nästa.
  6. På sidan Vilken företagsportfölj vill du ansluta till den här appen? väljer du en företagsportfölj, eller väljer Jag vill inte ansluta en företagsportfölj ännu. och klickar sedan på Nästa.
  7. Granska sidan Publiceringskrav och klicka sedan på Nästa.
  8. Granska sidan Översikt och klicka sedan på Gå till instrumentpanelen.

Steg 3: Konfigurera inställningarna för din Meta-app

  1. När du har skapat en app klickar du på Användningsfall i din Meta for Developers-instrumentpanel.
  2. Klicka på Anpassa för användningsfallet Autentisera och begär data från användare med Facebook-inloggning.
  3. För att se till att kundinformation samlas in vid inloggningen klickar du på Lägg till bredvid e-post i avsnittet Behörigheter och funktioner.
  4. Klicka på Inställningar och gå sedan till Klientens OAuth-inställningar.
  5. På sidan Logga in med Facebook i Shopify admin kopierar du omdirigerings-URL:en från avsnittet Omdirigerings-URL:er.
  6. På sidan Inställningar i din Meta for Developers-instrumentpanel klistrar du in omdirigerings-URL:en i fältet Giltiga OAuth-omdirigerings-URI:er.
  7. Om du har fler än en omdirigerings-URL i avsnittet Omdirigerings-URL:er i Shopify admin upprepar du dessa steg för de ytterligare omdirigerings-URL:erna.
  8. På sidan Logga in med Facebook i Shopify admin kopierar du URL:en från avsnittet Avauktoriserings-URL.
  9. På sidan Inställningar i din Meta for Developers-instrumentpanel klistrar du in URL:en i fältet Återanrops-URL för avauktorisering.
  10. På sidan Inställningar i din Meta for Developers-instrumentpanel klickar du på Spara ändringar.

Steg 4: Konfigurera inloggningsuppgifterna i Shopify admin

  1. Klicka på Hem-ikonen för att återgå till din Meta for Developers-instrumentpanel och klicka sedan på Appinställningar > Grundläggande.
  2. Kopiera App-ID från din Meta for Developers-instrumentpanel.
  3. På sidan Logga in med Facebook i Shopify admin klistrar du in app-ID:t i fältet App-ID i avsnittet Inloggningsuppgifter.
  4. I din Meta for Developers-instrumentpanel klickar du på Visa bredvid Apphemlighet och kopierar sedan Apphemlighet.
  5. På sidan Logga in med Facebook i Shopify admin klistrar du in apphemligheten i fältet Apphemlighet och klickar sedan på Spara.
  6. Klicka på Spara ändringar i Shopify admin.

Steg 5: Testa och aktivera Logga in med Facebook

  1. På sidan Logga in med Facebook i Shopify admin klickar du på Fler åtgärder > Förhandsgranska och testar sedan Facebook-autentiseringsflödet som om du vore en kund som loggar in i din butik.
  2. Klicka på Aktivera.

När du har aktiverat Logga in med Facebook kan du testa kundupplevelsen genom att navigera till din webbshop och logga in på ditt kundkonto med Facebook.

Logga in med Shop

Om du har Shop Pay aktiverat kan din kund logga in med sina inloggningsuppgifter för Shop och sparade inloggningsnycklar. Kunder loggas också automatiskt in med Shop efter att de har betalat i din butik med Shop Pay.

Logga in med Shop aktiveras automatiskt för kundkonton och kan endast tas bort från butiken om du inaktiverar Shop Pay.

Läs mer om hur du lägger till en Logga in med Shop-knapp i butiken.

Hantera inloggningsalternativ via sociala medier

Du kan redigera, stänga av eller ta bort en ansluten inloggningsmetod via sociala medier.

När du stänger av eller tar bort en inloggningsmetod via sociala medier förblir kunderna inloggade för att förhindra avbrott. Inloggningssessioner via sociala medier löper ut naturligt, eller när kunderna loggar ut.

Steg:

  1. I Shopify admin går du till Inställningar > Kundkonton.

  2. I avsnittet Autentisering klickar du på Hantera.

  3. Klicka på -menyn bredvid den inloggningsmetod du vill ändra.

  4. Gör något av följande:

    • Om du vill redigera ett inloggningsalternativ klickar du på Hantera och uppdaterar sedan de inloggningsuppgifter som du vill redigera.
    • Om du vill stänga av ett inloggningsalternativ utan att ta bort det klickar du på Stäng av.
    • Om du vill ta bort ett inloggningsalternativ klickar du på Ta bort och därefter på Ta bort i dialogrutan.

Uppdatera inloggningar via sociala medier när du byter domän för kundkonton

Om du planerar att ändra din domän för kundkonton till en annan URL måste du uppdatera inställningarna för inloggning via sociala medier innan du genomför ändringen i Shopify. Detta säkerställer att kunderna kan fortsätta logga in utan avbrott.

De här stegen krävs när du uppdaterar din URL för kundkonton i Shopify från det äldre formatet, till exempel shopify.com/1234567890/account, till det nya subdomänformatet account.your-store.com, eller från en befintlig subdomän till en annan subdomän, till exempel när du uppdaterar account.your-store.com till customers.your-store.com.

Lägg till den nya subdomänen för kundkonton hos dina leverantörer för sociala medier

Du lägger till den nya domänen i inställningarna hos din leverantör för sociala medier, tillsammans med din nuvarande domän. När du har ändrat domänen för kundkonton i Shopify och bekräftat att in- och utloggningsprocessen för kundkonton fungerar kan du ta bort de gamla domänposterna.

Du måste upprepa dessa steg för varje inloggningsalternativ via sociala medier som du har aktiverat.

Steg:

Google
  1. Gå till Google Cloud Console och öppna API:er och tjänster > Inloggningsuppgifter.
  2. Välj den OAuth 2.0-klient som du skapade för Shopify.
  3. Lägg till en ny post under Auktoriserade JavaScript-ursprung. Till exempel: https://account.your-store.com
  4. Lägg till en ny post under Auktoriserade omdirigerings-URI:er. Till exempel: https://account.your-store.com/authentication/social/google/callback
  5. Lägg till en ny post under Återkalla callback-URL. Till exempel: https://account.your-store.com/authentication/social/google/revoke
  6. Spara dina ändringar. Behåll både de gamla och nya URL:erna tills vidare.
  7. Gå tillbaka till din Shopify admin och följ stegen för att ändra din kontodomän till den nya anpassade subdomänens URL i Shopify.
  8. Testa både inloggning och utloggning med varje socialt inloggningsalternativ i ditt digitala skyltfönster för att bekräfta att allting fungerar.
  9. Valfritt: När du har bekräftat att inloggningsprocessen fungerar korrekt kan du återvända till Google och ta bort de gamla domänposterna.
Facebook
  1. Gå till Meta for Developers och öppna din app.
  2. Gå till Facebook Inloggning > Inställningar.
  3. Lägg till en ny post under Giltiga URI:er för OAuth-omdirigering. Till exempel: https://account.your-store.com/authentication/social/facebook/callback
  4. Lägg till en ny post under URL för att återkalla auktorisering. Till exempel: https://account.your-store.com/authentication/social/facebook/revoke
  5. Gå till Inställningar > Grundläggande.
  6. Lägg till en ny post under Appdomäner. Till exempel: account.your-store.com
  7. Spara dina ändringar. Behåll både de gamla och nya URL:erna tills vidare.
  8. Gå tillbaka till din Shopify admin och följ stegen för att ändra din kontodomän till den nya anpassade subdomänens URL i Shopify.
  9. Testa både inloggning och utloggning med varje socialt inloggningsalternativ i ditt digitala skyltfönster för att bekräfta att allting fungerar.
  10. Valfritt: När du har bekräftat att inloggningsprocessen fungerar korrekt kan du återvända till Facebook och ta bort de gamla domänposterna.