Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPB Cup
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Så här lägger du till inloggning med telefonnummer via OTP i WordPress

Minns du när e-post och lösenord var det enda sättet att logga in på webbplatser? Tiderna har förändrats, och nu förväntar sig många användare att det ska vara bekvämt att logga in med sina telefonnummer.

Efter att ha hjälpt olika personer att sätta upp telefonbaserade inloggningssystem på sina WordPress-webbplatser har jag lärt mig vilka metoder som fungerar bäst – och vilka som bör undvikas. Jag har testat allt från premiumplugins till anpassade lösningar för att hitta de mest tillförlitliga alternativen.

I den här guiden berättar jag hur du lägger till telefonnummerinloggning med OTP-verifiering på din WordPress-webbplats. Oavsett om du driver en webbplats för småföretag eller en stor medlemsplattform kommer du att hitta en lösning som passar dina behov.

Add Login with Phone Number via OTP in WordPress

Varför låta WordPress-användare logga in med sina telefonnummer?

Lösenord kan vara krångliga, särskilt när du driver en community-webbplats, som en medlemssida, en blogg med flera författare, en e-handelsplats och så vidare.

Problemet är att folk ofta glömmer bort lösenord, återanvänder svaga lösenord eller skriver ner dem så att andra kan se dem. Det är inte säkert, och många har sagt till mig att de önskar att det fanns ett enklare sätt att logga in på WordPress-webbplatser.

Att erbjuda inloggning via telefonnummer med engångslösenord (OTP) gör saker och ting enklare. Det tar bort behovet av att komma ihåg lösenord samtidigt som användarkonton hålls säkra.

Här är varför du bör överväga att lägga till telefoninloggning på din WordPress-webbplats:

  • 🔒 Bättre säkerhet: Lösenord kan hackas eller stjälas. OTP:er ändras varje gång, vilket gör inloggningen säkrare.
  • ⚡ S nabbare inloggning: Inget behov av att skriva in långa lösenord. Med en snabbkod som skickas till en telefon kan användarna logga in direkt.
  • Färre lösenordsåterställningar: Om du driver en community-webbplats behöver dina användare inte längre återställa bortglömda lösenord, vilket sparar tid och supportärenden.
  • 😊 Förbättrad användarupplevelse : En smidig inloggning gör att människor är nöjda och mer benägna att återvända till din webbplats.
  • 📱 Perfekt för mobila användare: Allt fler surfar på sina telefoner. Att låta dem logga in med en kod gör processen sömlös.

Låt oss nu ta en titt på hur du enkelt kan tillåta inloggning med telefonnummer via OTP i WordPress.

Så här lägger du till inloggning med telefonnummer via OTP i WordPress

Du kan enkelt lägga till en telefonnummerinloggning i WordPress med hjälp av gratispluginet Login with Phone Number.

Men eftersom WordPress inte skickar SMS-meddelanden som standard behöver du också en tredjepartstjänst som Firebase eller Twilio för att hantera OTP-leverans. Jag ska visa dig hur du ställer in allt detta.

Först måste du installera och aktivera det kostnadsfria plugin-programmet Login With Phone Number. För mer information, se denna handledning om hur du installerar ett WordPress-plugin.

När du har aktiverat pluginet går du till sidan Inloggningsinställningar ” Allmänt i WordPress instrumentpanel och markerar alternativet “Aktivera inloggning med telefonnummer”.

Därefter kan du lägga till landskoder för alla regioner där dina användare loggar in. Som standard inkluderar plugin landskoderna för telefonnummer för alla länder.

Jag rekommenderar att du låter den här inställningen vara som den är. Det säkerställer att din webbplats förblir tillgänglig för en global publik.

Enable phone login

Därefter måste du markera alternativet “Enable email login” om du vill tillåta e-postinloggning för dina användare.

Vi rekommenderar denna inställning om du har befintliga användare som är vana vid att logga in med sin e-post. På så sätt ser du till att de inte blir frustrerade när inloggning via telefonnummer aktiveras, eftersom de fortfarande kan logga in med sin e-post.

Du kan sedan markera alternativet “Force to get email after phone number” (tvinga fram e-post efter telefonnummer). Den här inställningen säkerställer att nya användare måste ange sin e-postadress innan de kan slutföra registreringen. Det är särskilt användbart om du redan har en e-postlista och vill samla in e-postmeddelanden från nya användare.

Du kan också aktivera användarregistrering med ett telefonnummer. När detta är gjort anger du längden på den aktiveringskod som ska ges till användarna.

Choose activation code length

Efter det måste du bläddra ner och hitta alternativet “Aktivera timer”. Klicka för att aktivera det och ställ sedan in tidsgränsen för användare att ange OTP.

Om du t.ex. ställer in den på 60 sekunder har användarna en minut på sig att ange koden innan den går ut. Klicka sedan på knappen “Spara ändringar” för att lagra dina inställningar.

Enable timer

Gå vidare och byt till fliken “Gateway” från toppen. Här måste du välja en SMS-tjänsteleverantör för ditt telefonnummer OTP-inloggning.

Jag kommer att välja Firebase för denna handledning. Det är en Google-tjänst som låter dig skicka engångslösenord till användarnas telefoner för säker inloggning. Du kan dock också välja alternativ som Twilio, WhatsApp, Alibaba SMS och mer.

Tänk på att vissa av alternativen endast är tillgängliga i Pro-planen.

Choose an SMS gateway

När du har valt Firebase måste du lägga till dess API-nyckel och konfiguration.

För att göra detta måste du besöka Firebase Console och välja alternativet “Create a Firebase Project”.

Create a firebase project

Du kommer då till en ny skärm där du måste ange ett projektnamn. Du kan kalla det vad som helst som hjälper dig att komma ihåg vad du ska använda det till.

Klicka sedan på knappen “Fortsätt”.

Add a name for your project

Firebase kommer nu att be om tillstånd att aktivera Google Analytics för projektet.

När du har tillåtit det måste du välja “Default Account for Firebase” i rullgardinsmenyn och klicka på knappen “Create Project”.

Click the Create Project button

Du kommer nu till sidan Projektöversikt. Här navigerar du till fliken Build ” Authentication i den vänstra kolumnen.

Gå vidare och klicka på knappen “Kom igång”.

Click Get Started on the Authentication page

När du har gjort det kommer några nya inställningar att synas på skärmen. Härifrån väljer du “Telefon” som den ursprungliga leverantören och växlar omkopplaren “Aktivera”.

Detta gör det möjligt för användare att logga in med ett mobiltelefonnummer med hjälp av Firebase SDK-telefonverifiering. Klicka sedan på knappen “Spara”.

Enable the phone option in Firebase

Gå nu till fliken “Inställningar” och välj alternativet “Auktoriserade domäner” i den vänstra kolumnen.

Här måste du klicka på knappen “Lägg till domän”. Detta öppnar en prompt där du måste lägga till webbplatsens domännamn.

Click Add Domain button

Därefter klickar du bara på inställningsikonen bredvid Projektöversikt längst upp och väljer fliken “Projektinställningar”.

Bläddra sedan ner till avsnittet “Your Apps” och välj webbikonen.

Click the web icon

Du måste nu lägga till ett namn för din app och klicka på knappen “Register App”.

När du gör det kommer Firebase att generera en SDK åt dig. Detta står för Software Development Kit, men det fungerar som en app.

Click the Register App button

Därefter klickar du bara på knappen “Fortsätt till konsolen”.

När du är tillbaka på sidan Projektöversikt kopierar du bara “Web API Key” och förvarar den på ett säkert ställe.

Copy the web API key for Firebase

Bläddra nu ner till avsnittet “Dina appar” där information om din senaste app visas på skärmen.

Här väljer du alternativknappen “Config” för att visa din Firebase SDK som config. Kopiera och spara den på ett säkert ställe.

Copy the Firebase SDK config

Därefter måste du gå tillbaka till din WordPress-instrumentpanel och lägga till Firebase API-nyckeln och konfigurationen i respektive fält i plugin-inställningarna för Login with Phone Number.

Klicka sedan på knappen “Save Changes” för att spara dina inställningar.

Add Firebase API key and  config

När det är gjort öppnar du WordPress-sidan där du vill lägga till inloggningsformuläret och klickar på knappen “Lägg till block”.

Från blockmenyn måste du välja blocket “Shortcode” och lägga till följande kortkod i det:

[idehweb_lwp]

Add phone number login shortcode

Klicka slutligen på knappen “Update” eller “Publish” för att spara dina inställningar.

När nya användare besöker din webbplats kan de nu registrera sig och logga in med sitt telefonnummer, medan befintliga användare fortfarande kan logga in med sin e-postadress.

Phone number login via OTP

När du har ställt in detta rekommenderar vi att du skickar ett e-postmeddelande till dina befintliga användare och uppmuntrar dem att lägga till sina telefonnummer så snart som möjligt.

Det kan de göra genom att besöka sin profilsida i WordPress instrumentpanel, scrolla ner till avsnittet “Personlig information”, lägga till sitt telefonnummer och klicka på Uppdatera användare.

Detta säkerställer att även befintliga användare som redan har registrerat sig kan logga in med sina telefonnummer senare.

Existing users adding phone numbers

Bonus: Lägg till inloggning med ett klick med Google i WordPress

Att logga in med ett telefonnummer och OTP är ett säkert alternativ, men vissa användare föredrar ett ännu snabbare sätt att komma åt sina konton.

Genom att lägga till Googles inloggning med ett klick kan användare logga in direkt utan att skriva in ett telefonnummer eller vänta på en OTP. Att kringgå WordPress inloggningsformulär på det här sättet kan förbättra användarupplevelsen, minska inloggningsfriktionen och öka antalet registreringar.

Det är särskilt användbart för webbplatser med många besökare, t.ex. medlemsplattformar, onlinebutiker eller communities.

Google Login Preview

Du kan enkelt lägga till den här funktionen med hjälp av Nextend Social Login-pluginet. Det låter användare logga in med sitt Google-konto och stöder även Facebook- och Twitter-inloggningar.

Nextend gör det också möjligt att länka sociala profiler till befintliga konton, så att återvändande användare inte skapar dubbletter.

Adding social login to your WordPress website

För att komma igång, se bara vår handledning om hur du lägger till inloggning med ett klick med Google i WordPress.

Jag hoppas att den här artikeln hjälpte dig att lära dig hur du lägger till inloggning med telefonnummer via OTP i WordPress. Du kanske också vill se vår nybörjarguide om hur du tar bort alternativet för återställning/ändring av lösenord från WordPress och vår handledning om hur du skapar en popup-modal för inloggning i WordPress.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. See how WPBeginner is funded, why it matters, and how you can support us. Here's our editorial process.

The Ultimate WordPress Toolkit

Get FREE access to our toolkit - a collection of WordPress related products and resources that every professional should have!

Reader Interactions

Comments

  1. Congratulations, you have the opportunity to be the first commenter on this article.
    Have a question or suggestion? Please leave a comment to start the discussion.

Leave A Reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.