Att sätta upp intyg logga in på en Enda Sida tillämpningar

installera certifikat logga in på samma Sida-program

Det finns två huvudsakliga sätt att användarna kan logga in till våra program:

  1. med hjälp av ett certifikat

Vi skrev den första versionen av autentisering front i “traditionell” HTML och lite jQuery. Detta innebar att ingen av dessa sign-in metoder som ställdes någon verklig teknisk utmaning. Den 2FA var enkel: det är två HTML-formulär och ett samtal till ett externt API för SMS. Intyget vägen var enkel och vi omdirigeras användaren till en sida som begärt intyg.

Men när omskrivning auth som en enda sida-appen för att förbättra användarens upplevelse (UX), certifikat som visade sig vara en utmaning. Vi kunde inte dirigera om våra användare till en sida som begärt intyg längre. Om vi gjorde och att det var något fel med det intyg som vi skulle ha för att omdirigera dem igen för att visa dem felmeddelande. Detta skulle helt förstöra den enda sida UX så vi var tvungna att ta fram en bättre lösning.

kärnan av problemet är att det inte är någon JavaScript-API som vi kunde använda för att uppmana användaren för ett certifikat. Det har begäras av servern.

Den huvudsakliga idén

Den huvudsakliga idén med den lösningen är att ha en dold iframe) som läser in en sida som kräver ett användarcertifikat. Denna sida tolkar och serializes certifikatet och skickar data till klienten. Detta sker i flera steg som vi kommer att gå igenom i ordning.

För puropose av denna artikel kommer vi att fokusera på användningen fall när en autentiserad användare lägger till ytterligare ett certifikat för att logga in med. Denna process är lite enklare än det tecken som vi redan har användarna tillstånd info, men den viktigaste begrepp som fortfarande finns kvar.

Den lösning som diskuteras här använder Reagera för klienten, men detta tillvägagångssätt bör arbeta i andra bibliotek.

Steg 1: De Enda Sida App sida

När en autentiserad användare klickar på en knapp, en iframe återges med källa i vårt certifikat få endpoint (mer om det senare). Den relevanta delen av den Reagerar komponent som hanterar detta visas nedan:

CertificateObtainer

CertificateObtainer sätter upp ett meddelande lyssnaren med hjälp av postMessage API. Lyssnaren lyssnar efter den händelse som kommer att sändas av iframe i slutet (se Steg 4).

Det gör det också iframe och börjar väntar när iframe hämtats. Detta beror på att vi har inget sätt att reagera när certifikatet få misslyckas. Detta kan hända när användaren avstår från att välja ett intyg (servern returnerar 403 Forbidden i detta fall) eller när det finns ett server fel.

Steg 2: certifikat få endpoint

iframe uppmanar /intyg/få API via HTTP GET. Detta leder kunden till en av flera certifikat obatining servrar. Du kan fråga sig varför den komplikation av omdirigeringar. Anledningen till detta är att vi vill göra det möjligt för användaren att försöka igen. När en server begär ett certifikat för första gången och användaren avbryter det kommer inte att be andra gången och återgå 403 Forbidden.

vi har Alltså flera servrar med olika domännamn för att ge användaren mer försök. /intyg/få – omdirigeringar för den som ringer till en av dem som använder 302 Hittade svar på måfå. Vi kallar dessa servrar CertAuths. Det omdirigera också lägger till en redirect_url frågeparameter ställa tillbaka till /intyg/få.

Steg 3: Begär intyget

CertAuth-servern är konfigurerad att kräva klientcertifikat för autentisering på alla förfrågningar. När en begäran kommer på en specifik URL-det tolkar intyg från begäran (parsning logik är ur omfattningen av denna artikel). Den resulterande HTML-ser ut så här (kommentarer som läggs till och uppgifterna omskrivna):

Certifikat self-skicka formulär

Steg 4: Hantering av certifikat/få INLÄGG

certifikat/få – tar emot en POST-begäran det ser ut för intyg uppgifter och utdrag lite mer information från certifikatet. Gör denna en server-sidan är mycket enklare än det skulle vara på klienten. Också vi behöver för att göra denna resa ändå, så varför inte förbehandla data medan du gör det (felmeddelanden var översatt):

Erhålla controller åtgärder för POST-förfrågningar

Om certifikatet data inte innehåller fel i den resulterande HTML-ser ut så här:

Framgångsrika intyg resultat

Om det finns några fel i produktionen ser ut så här istället:

Errorneous intyg resultat

Som vi kan se, i båda fallen använda föräldern.postMessage för att skicka data tillbaka till den Reagerar ansökan. Anledningen till detta är inte gjort av CertAuth sig är att vi ville frikoppla intyget erhålla från dess användning. Med andra ord, vi har nu ett universellt sätt att få intyg data från användaren (CertAuth servrar).

Steg 5: Använda certifikat

Efter att ha mottagit det meddelande som sett i Steg 1, Reagera ansökan nu har certifikat data. Det kan börja organisera resten av certifikat för inlämning av processen.

för det Första, det kräver en validering slutpunkt. Detta kontrollerar flera saker:

  1. intyget är giltigt
  2. intyget inte redan finns i systemet
  3. certifikatet från en som stöds utfärdaren
  4. certifikat: s Gemensamma Namnet är detsamma som namnet på den användare

Användaren visas då intyget data för att kontrollera att de faktiskt valda certifikatet de ville. Om verifieringen lyckades, de kan bekräfta att de vill lägga till certifikat till sitt användarkonto.

Detta samtal görs med hjälp av intyget uppgifterna och certificateAuthToken. Dosan har två huvudsakliga syften:

  1. videosamtal kan endast göras en gång. Detta garanteras av den nonce fordran i den token.
  2. videosamtal kan endast göras med certifikat som användaren faktiskt har valt. Denna är markerad med underrubrik påstående som innehåller intyg stämpel.

Och det är det! Användaren har precis lagt ett intyg på ett säkert sätt i en enda sida i ansökan.

Slutsats

På ett enkelt exempel har vi visat hur du aktiverar certifikatbaserad logga in på en enda sida ansökan. Det kan vara en ganska komplicerad process att göra på rätt sätt och viktigast av allt ordentligt. Det är möjligt dock och inte förlita sig på att alla appletar och andra metoder som inte stöds.

We will be happy to hear your thoughts

Leave a reply