Sømløs Identity - JavaZone 2017, 13. september 2017
•Download as PPTX, PDF•
0 likes•106 views
Mitt foredrag på JavaZone 2017 om Sømløs Identity. https://vimeo.com/233785597
Recommended
Recommended
More Related Content
Similar to Sømløs Identity - JavaZone 2017, 13. september 2017
Similar to Sømløs Identity - JavaZone 2017, 13. september 2017 (20)
Recently uploaded
Recently uploaded (20)
Sømløs Identity - JavaZone 2017, 13. september 2017
- 1. SØMLØS IDENTITY Hva du bør vite JavaZone 2017 Henrik Walker Moe 13/09/2017
- 3. Foto: Ross Parmly, Lisens: CC0 1.0 @henrikwm84 HENRIK WALKER MOE MANAGER, TECHNOLOGY BEKK henrik.walker.moe@bekk.no
- 4. Foto: Avinor AS, Lisens: CC-BY-3.0 24 542 54551 546 09145
- 5. avinor.no Avinor App earlybird.avinor.no EKSTERNE KANALER I AVINOR Kilder: https://avinor.no, Avinor App, https://earlybird.avinor.no, Foto: Avinor AS
- 6. Foto: Markus Spiske, Lisens: CC0 1.0 Nøkkelen til Sømløs Identity er…
- 7. UX > Tech Foto: picjumbo.com, Lisens: CC0 1.0
- 9. Ta med hjem konkrete tips, teknikker og ideer – gjør din løsning mer sømløs! MÅL Kilde: http://www.slideshare.net/lillayla/design-thinking-and-lean-ux, Foto: Lillian Ersøy
- 10. UX Foto: William Iven, Lisens: CC0 1.0
- 11. “The total cognitive load, or amount of mental processing power needed to use your site, affects how easily users find content and complete tasks” Minimize Cognitive Load to Maximize Usability | Kathryn Whitenton, Nielsen Norman Group
- 12. “Hick’s Law […] states that the more stimuli (or choices) users face, the longer it will take them to make a decision” Hick’s Law: Making the choice easier for users | Mads Soegaard, Interaction Design Foundation
- 13. VANLIG UX Kilde: https://payment.schibsted.no/flow/auth/, Foto: Schibsted Products and Technology AS
- 14. BEDRE UX Kilde: https://www.paypal.com, Foto: PayPal Inc.
- 15. EARLYBIRD Kilde: https://earlybird.avinor.no, Foto: Avinor AS
- 16. EARLYBIRD Kilde: https://earlybird.avinor.no, Foto: Avinor AS
- 17. Foto: Fredrick Kearney Jr, Lisens: CC0 1.0 On-boarding Gi gode insentiver Ryddig og målrettet interaksjonsdesign Fjern tekniske hindre Rask feedback
- 18. Foto: NASA, Lisens: CC0 1.0 Kontekst Gi skreddersydd opplevelse Finn kontekstene Flere kontekster, flere variasjoner
- 19. Kilde: iPhone 6 Plus, Apple Inc., Video: Avinor AS
- 23. Kilde: iPhone 6 Plus, Apple Inc., Video: Avinor AS
- 25. Kilde: iPhone 6 Plus, Apple Inc., Video: Avinor AS
- 30. Kode Foto: Lorenzo Cafaro, Lisens: CC0 1.0
- 32. KLIENTBIBLIOTEKER Logo: Redux, Lisens: CC0 1.0 – Logo: React, Lisens: BSD-3-Clause – Logo: IdentityModel, Lisens: Apache 2.0 React • redux • redux-auth-wrapper for å styre tilganger • redux-oidc for å gjøre autentisering • oidc-client.js som OpenID Connect klient
- 34. STYR KONTEKST MED ACR_VALUES Kilde: https://github.com/IdentityModel/oidc-client-js/blob/dev/sample/public/user-manager-sample.js
- 35. FLERE KONTEKSTER Klientapplikasjoner Autentiseringsserver Mobilnummer og kodeBrukernavn og passord Parkerings- booking EarlyBird Avinor App Kilde: Avinor App, https://earlybird.avinor.no, Foto: Avinor AS
- 36. Tjenester Foto: Rubén Bagüés, Lisens: CC0 1.0
- 37. Fordeler Ekspertise Outsourcer drifting SLA’er Egen HTML/CSS Ulemper Konfigurasjon Produktifisert Gir bort kontroll Sertifisert? Begrenset HTML/CSS
- 38. LEVERANDØRER Azure AD Azure AD B2C Auth0 http://open.bekk.no/identity-in-web-apps-2016
- 39. GJØR DET SELV Spring Security OAuth IdentityServer node oidc-provider Logo: Spring™ by Pivotal, Lisens: Apache 2.0 – Logo: IdentityServer, Lisens: Apache 2.0 – Logo: Node.js™, Lisens: CC-BY-SA 3.0
- 42. TAKK FOR MEG! Henrik Walker Moe @henrikwm84
Editor's Notes
- Hei og takk for at dere kom, og takk for at jeg fikk komme og snakke om noe jeg synes er veldig spennende Hvor mange er utviklere? Designere, prosjektledere/produkteiere? Det jeg skal snakke om i dag er noe som påvirker oss alle hver dag
- Hvem får litt angst når du ser en slik side? Nesten litt frekt å bli møtt med en hukommelsestest mens du er midt oppi det du egentlig skulle gjøre Vi skal gå litt i dybden på innlogging i dag og finne bedre måter å løse dette på
- Mitt navn er Henrik Walker Moe. Jobber i BEKK som utvikler og er over middels opptatt av UX (brukeropplevelse) Idag skal jeg lære bort det jeg kan om å lage gode sømløse innloggingsopplevelser Og som dere ser svever litt i skyene om dagen: skyløsninger, og systemutvikling innen luftfart hos Avinor
- Hva driver Avinor med? Statseid selskap som har ansvaret for all operativ logistikk på lufthavnene<klikk> Drifter alle Norges 45 sivile lufthavner<klikk> I fjor: 24,5 mill passasjerere som reiste innenlands<klikk> 51,5 mill passasjerere totalt inkl. utenland og offshore
- Jeg jobber i teamet «Eksterne kanaler» hos Avinor avinor.no (informasjon, bestille parkering, netthandel), Avinor App (reisefølge), EarlyBird (legacy) I tillegg en innloggingsløsning Min Profil som fungerer som autentiseringsserver (profil med kvitteringer, kontaktinformasjon, boardingkort) Røde tråden for i dag: Erfaringer under utvikling av autentiseringsserveren samt øvrige erfaringer på alle løsningene Hva er de unike utfordringene? Brukere i ulike kontekster: i sofaen, på beina, stresset. 60% er på mobile enheter Brukerne er innom 1 gang, så 1 sjanse til å gi en god opplevelse Stiller høye krav til sømløs brukeropplevelse = god reiseopplevelse
- Hvorfor tittelen «Sømløs Identity»? Autentiseringsserveren vår er det sentrale navet i appene våre. Den må oppleves som rask, robust og sikker. Hvis den oppleves som sømløs er gevinsten vår fornøyde og, kanskje aller viktigst, innloggede brukere Hva mener du er nøkkelen til «Sømløs Identity»? <neste slide>
- UX må drive fram de tekniske kravene Uten god UX er det vanskelig å få glade og motiverte brukere Kan ha knallgod og knallsikker teknisk løsning men hjelper lite uten god UX Skal snakke om erfaringer, delt opp i 3 områder <klikk>
- Hvilke UX-utfordringer har vi for innloggingsopplevelsen? Hvordan kan vi motivere brukeren til å logge inn? Hva består en god innloggingsopplevelse av? Hvilke rammeverk og biblioteker har vi brukt i appene våre? Hvilke skytjenester har vi for IDaaS i dag? Hvilke løsninger tilbyr skyen for B2B- og B2C-innlogging (dvs ansatte og sluttbrukere)? Finnes det begrensninger i disse tjenestene som gjør sømløs innlogging vanskelig?
- Hva er ditt mål for i dag? Lær av erfaringene våre, og ta med hjem håndfaste tips, løsninger eller ideer fra idag For alle: utviklere og ikke-tekniske: designere, produkteiere
- 8 min Hvilke premisser har vi for å skape gode innloggingsopplevelser?
- <pust> Vi vet at ved å redusere antall valgmuligheter så reduseres kognitiv belastning Finner innhold lettere Fullfører oppgaver raskere Dette gir brukeren økt måloppnåelse og dermed en lykkefølelse
- <pust> Og Hick’s Law forteller oss at mange valgmuligheter i skjermbildene øker tiden det tar brukeren å foreta et valg Ser vi på tid som valuta så er brukeren gjerrig og ønsker å bruke så lite penger som mulig. Blakker vi brukeren risikerer vi en irritert bruker som kan forlate nettsiden. En bruker som derimot har mye penger igjen kan gå videre til neste mål på nettsiden din Fokusert interaksjonsdesign. Fjern støyende elementer slik at bruker kan nå måloppnåelse raskest mulig
- Dette er et typisk brukernavn og passord innloggingsskjermbilde Hva hvis man glemmer passord, eller verre: eposten En slik løsning kan bli OK. Men vi vet også fordelene med færre valgmuligheter og færre ting å ta stilling til og huske… raskere vei igjennom innlogging vil oftest være bedre For å ta et eksempel fra den positive enden av UX-skalaen..<klikk>
- Her ser vi PayPal sin innloggingsside. Enkelt, ryddig design Å lage god UX virker veldig enkelt, men det er vanskelig La oss se på EarlyBird og hvordan vi valgte å løse innlogging der
- Driverne for interaksjonsdesignet her har vært fokus på holde skjermbildet enkelt, gi insentiver. Skjul alt annet av ekstra linker og innhold under «the fold» Mobilnummer og sms-kode som autentiseringsmekanisme. Slipper å huske passord! Brukere er på mobile enheter og passord oppleves som vanskelig (har brukertestet) Ett skjermbilde hvor vi ber om en ting og ett call-to-action Fordelen med det: bruker får rask feedback og god måloppnåelse fordi hvert steg går fort å gjennomføre Ofte brukt interaksjonsdesignpattern hos oss. Be om litt og litt brukerinformasjon over flere skjermbilder, enn en vegg med mange påkrevde skjemafelter
- Et viktig prinsipp er at et design kan alltids bli bedre. Ofte kan veldig enkle tekniske grep forbedre interaksjonen drastisk. Når vi skal skrive inn mobilnummeret her, hvordan kan vi hjelpe brukeren for å øke hastigheten på måloppnåelsen? HTML5 ga oss inputhjelp på mobilenheter som gjør at bruker kan skrive raskere <klikk> Egen «input type» for telefonnumre, type=tel. Type=email. Veldig deilig hvis du har en lang epostadresse! HTML5-attributtene er veldig lavthengende frukter Vil gi umiddelbart raskere måloppnåelse for brukeren, lav risiko Vi har sett her et eksempel på innlogging til EarlyBird. Viktig med god sømløs on-boardingsopplevelse under innloggingen slik at brukeren går fra å være besøkende til å logge inn og bli konvertert bruker. Oppsummert om on-boarding kan vi si<klikk>
- <klikk>Ryddig interaksjonsdesign,<klikk>Gi gode insentiver,<klikk>Fjern tekniske hindre,<klikk>Rask feedback Etter fullført on-boarding er neste oppgave, hvis du f.eks. driver en nettbutikk, å gi kjøpsinsentiver slik at man kan konvertere brukeren til kjøpende kunde Viktig å huske at on-boarding er en kontinuerlig iterativ prosess hvor man må måle, justere og måle igjen. Vi bruker Google Analytics til å måle «bounce rate», slik at vi lærer hva som virker og ikke virker. A/B-testing Viktig nøkkel for å lage best mulig design for on-boardingen er å forstå brukers kontekst
- 19 min <klikk>Er brukerne på beina, i aktivitet, i en kjøpsprosess eller på en reisefot? Finn kontekstene <klikk>Når du forstår kontekstene, lag en skreddersydd on-boardingopplevelse for innloggingen <klikk>Kan brukerne være i flere kontekster, lag flere innloggingskjermbilder slik at hver kontekst har en skreddersydd on-boardingopplevelse Jeg skal vise dere hva jeg mener med kontekster og on-boarding ved å vise noen eksempler fra Avinor appen
- 20:30 min, halvveis på tid!. Avinor appen for iPhone i App Store, og Android i Google Play Kontekst: Nettopp lastet ned appen Vi vil se en on-boarding som fokuserer på å vise verdien appen gir deg som din reisefølge
- Appen vil gi deg rask og enkel tilgang til informasjon, Du kan følge flighter og få pushvarsel ved endringer Gode skjermbilder, fokusert ledetekster
- Ledetekst og call-to-action er tydelig, og positivt ladet – kom i gang!
- Kontekst: ikke-innlogget bruker – ønsker å lage en profil for å f.eks. angi reg.nr hvis du skal parkere bilen din på en lufthavn (skyte inn: kan fortsatt bruke appen uten brukerprofil)
- Vi klikker på «Registrer mobilnummer» Enklere on-boarding fordi du allerede har appen Fokuserer på at mobilnummeret er alt som trengs – enkelt å lage en bruker! Ingen store skjema med vegg av påkrevde felter
- Kontekst: ønsker å følge en flight for å få abonnere på endringer, f.eks. ny gate, forsinkelser osv. Vi klikker på Ny reise og finner en flight som vi ønsker å følge
- Vi klikker på Følg denne flighten Her ser vi den tredje varianten av teknisk sett samme innlogging i samme app, men i en litt annet kontekst og variant enn de foregående eksemplene
- Tydelig ledetekst og call-to-action On-boardingen fokuserer på funksjonaliteten du får tilgang til når du logger inn
- Vi fokuserer vi på hva som gir brukerverdi: rask tilgang på viktig informasjon, transportpriser på buss/taxi, praktisk info for din destinasjon..<klikk>
- Eller relevante tilbud på lufthavnene du befinner deg på Å styre innloggingen slik vi har sett med flere kontekster og variere on-boardingen, gir en brukeren skreddersydd opplevelse. Det er noe våre brukerne responderer veldig positivt på. Vi lager ikke slik on-boarding for alle tjenestene våre. Det blir oftest heller bestemt ut ifra behovet til å ha en innlogget bruker i tjenesten. Det var det viktigste jeg hadde å si om brukerkontekster og on-boarding La oss se nærmere på det tekniske<klikk>
- 22:30 min …og hvilke erfaringer vi har gjort oss på å håndtere Identity/autentisering i løsningene våre Ikke vær redd hvis du ikke skjønner all koden, hensikten er bare å vise muligheter
- Arkitekturen ser ofte slik ut: Front-end separat applikasjon fra back-end API-applikasjonen. API sørger for å persistere data basert på ønsket forretningslogikk for applikasjonens domene Hva fokuserer vi på i dag? <klikk> Erfaringer på front-end er enklest for oss å dele med andre fordi her har vi mest i felles med andre prosjekter Hvilke rammeverk og biblioteker bruker vi på front-end om dagen?
- Byggeklossene våre front-end apper består av er:<klikk> React med: Redux Redux-auth-wrapper for å styre tilganger (autorisasjon) på sider/routes Redux-oidc for OpenID Connect autentisering med Implicit Flow (redirect fram/tilbake med JWT) Bruker oidc-client.js fra IdentityModel. Frittstående JS-rammeverk. Gjør stille-reautentisering av bruker, gjør alt av autentiseringsforespørsler – veldig bra!
- Liker med redux-auth-wrapper: Sikkerhetsdokumentasjon i kode. Her ser vi alle sidene (routes) i en React app med tilgangsstyring i kode UserIsAuthenticated og UserIsAdmin Vi hadde nok ikke hatt en like sømløs autentisering i React-appene våre hadde det ikke vært for at kombinasjonen av React/redux, redux-auth-wrapper og redux-oidc fungerer bra sammen. <pust> Har man flere apper burde man håndtere autentiseringen i front-enden likt: Kompetansen og erfaringen hos utviklerne lett kan overføres Forbedringer kan fritt overføres til flere apper Utviklerne kan lettere context switche mellom apper
- I demoen av Avinor appen tidligere viste jeg flere brukerkontekster som styrte bruker til forskjellige on-boardingsopplevelser<klikk> Her ser vi et konfigurasjonseksempel med oidc-client.js for å få til det vi gjør. Dette biblioteket gjør selve autentiseringen mot autentiseringsserveren acr_values: Authentication Context Class Reference values Klientapplikasjonen forteller autentiseringsserveren at disse parameterne skal brukes i autentiseringskonteksten for akkurat denne autentiseringsforespørselen Ved å sende med parameter for kontekst, språk m.fl. kan våre klientapplikasjoner diktere hva slags on-boardingsopplevelse brukeren får under innlogging Skal IKKE brukes til å påvirke selve autentiseringserverens indre mekanismer for autentisering. Kun påvirke «look & feel» under innlogging på autentiseringsserveren Hva verdiene er og hva de gjør bestemmer du helt selv i klientapplikasjonen og på autentiseringsserveren din. Vi eier begge deler og står fritt til å lage våre egne standarder her
- For å illustrere hvor kraftig verktøy acr_values kan være…. Vi har 2 autentiseringsmekanismer vi bestemmer pr klientapplikasjon Brukernavn og passord Mobilnummer med sms-kode Vi kan i tillegg, for hver av disse klientapplikasjonene, styre innloggingsopplevelser basert på kontekst med å sende med info i acr_values. (hvis tid): Skal man høyne sikkerheten kan man kjøre en step up autentisering fra mob.nr og smskode, til ny faktor: passord, app-kode Brukere responderer veldig positivt til høy grad av skreddersydde opplevelser fordi de føler seg forstått, og for innloggingsløsninger er dette en viktig nøkkel til sømløs innlogging
- 29 min Vi har sett på hva som skal til for å gjøre innloggingsopplevelsen «sømløs» i kode. Gitt du har kontroll over klientapplikasjonen og autentiseringsserveren kan du få til mye. Men kan vi bruke en skyleverandør som tilbyr IDaaS til å få til noe av det vi har sett her i dag? La oss først se på fordeler og ulemper med å velge en IDaaS-tjeneste
- Fordeler: <klikk...>Outsourcer driftingen og abonnerer i stedet på autentiserings- og Identity Management-tjeneste Eksperter tar seg av det tekniske – sikrere? Leverandøren har SLA for å garantere tjenestekvalitet Ofte noen form for enkel tilpasning av HTML/CSS i ett innloggingskjermbilde Ulemper Produktifiserte og begrensede – driftsmargin de tar Enkel konfigurasjon, avansert funksjonalitet koster eller ikke mulig Gir bort full kontroll over konfigurasjon og data vs å hoste egen løsning Ikke full sertifisering for alle autentiseringsmåter i OpenID Connect & Oauth 2.0. (OpenID Foundation) Forenklet tilpasning av innloggingskjermbildet ofte ikke bra nok. JavaScript-støtte mangelfull Konklusjonen min er at velger man en skytjeneste så gir du bort muligheten til å lage beste mulige innloggingsopplevelsen, men du får så klart de åpenbare fordelene en skytjeneste gir. En POC vil være helt nødvendig slik at du avdekker behov og evt. mangler i tjenestene
- I det norske markedet ser jeg at populære leverandører av IDaaS er<klikk>: Azure AD – B2B/ansatte, moden og solid tjeneste for Active Directory integrasjon med on-prem. Innlogging via ADFS. Azure AD B2C – For dine sluttbrukere, ikke rik på funksjonalitet men vokser raskt Auth0 – Både B2B og B2C. Flere: AWS, Google Identity, PingIdentity m.fl.<klikk> Se min bloggpost på open.bekk.no for flere detaljer rundt disse leverandørene På Avinor så vi tidlig at IDaaS-tjenester ga oss begrensinger på UX som var showstoppere (hvilke: skreddersydd on-boarding, full kontroll på autentiseringsserveren) Så hvis skytjenester ikke er for deg…. <klikk>
- Stiller krav til ekspertise men får full kontroll og kan lage best mulig løsning<klikk>: Spring (Java) – ikke OpenID-sertifiserte men populært rammeverk man kan bygge ut med OpenID Connect-støtte for å sikre applikasjoner, API’er og lage egen autentiseringsserver IdentityServer (.Net og .Net Core v4) – OpenID-sertifiserte og mest populære open-source .Net-rammeverket for å lage egen OpenID Connect & Oauth 2.0 autentiseringsserver. På Github og open-source Node OIDC-Provider (JS)– Full OpenID-sertifisering for alle OIDC-autentiseringsmåter, som er imponerende! Liker du JS/node så er kanskje denne verdt en kikk. På Github og open-source Hvis du har valgt å lage en egen autentiseringsserver så skal det finnes et rammeverk som passer for deg. Fortsatt viktig å avdekke behov, spesielt med tanke på krav til UX
- 35 min <klikk> UX må drive fram og styre teknologikravene. On-boardingen må være smertefri og målrettet Forstå brukers kontekst slik at du kan lage skreddersydde innloggingsopplevelser I React-appene våre fungerer redux-auth-wrapper- og redux-oidc bibliotekene ypperlig. Autentisering er lett å konfigurere, håndteringen av innlogget bruker i appen er ryddig og vi kan sende bruker til skreddersydd on-boarding ved hjelp av acr_values Det finnes IDaaS-tjenester idag for innlogging av B2B- og B2C-brukere. B2B-verden er mest moden men ofte begrenset på UX-muligheter. For B2C-segmentet og dine sluttbrukere er Azure AD B2C ung men lovende. Auth0 er også solid på B2B og B2C. Hvis du finner begrensninger i IDaaS-tjenestene - gjør det selv hvis du behersker de tekniske utfordringene det valget medfører
- Og til slutt…. Jeg vet at autentisering kan være et komplekst domene Her ser vi cockpiten til romfergen Endeavour og mange små knapper med store konsekvenser. Trikset for å lande trygt er å vite hvilke man bør trykke på… slik er det også med innloggingsløsninger Jeg håper jeg har fått satt søkelyset på noen knapper her i dag så uansett hvilken rolle du har så håper jeg du har fått noen konkrete tips, teknikker eller ideer som du kan ta med hjem – slik at din løsning blir hakket mer sømløs for dine brukere Hvis dere har spørsmål kom gjerne bort til podiet etterpå.
- Takk for at dere kom og ha en flott JavaZone videre! Takk for meg!