question

Dylan Hunt avatar image
Dylan Hunt asked

[RESOLVED - Now a GUIDE/TEMPLATE] FB Login / FB Reg Flow

Pretend someone visits my site and wants to register for my game then login , all via fb. What is the recommended flow? I thought I saw a flowchart somewhere but can no longer find it.

10 |1200

Up to 2 attachments (including images) can be used with a maximum of 512.0 KiB each and 1.0 MiB total.

brendan avatar image
brendan answered

Wow - great details, thanks!

I would actually recommend using the Facebook login as the starting point though, getting the player account set up with CreateAccount set to true, and add the email/username/password later with AddUsernamePassword. Using RegisterPlayFabUser first requires that the user enter info to set up the account, which means there's friction in the path to getting the player to actually try the gameplay. That usually results in a significant amount of abandonment, so setting up the account "invisibly" and then asking them to update the other info you need later is usually more successful.

We also have a blog post on many of our recommendations on player account setup and login here: https://playfab.com/blog/first-impressions-count-best-practices-friction-free-player-authentication/. Hopefully that'll be helpful as well.

10 |1200

Up to 2 attachments (including images) can be used with a maximum of 512.0 KiB each and 1.0 MiB total.

Dylan Hunt avatar image
Dylan Hunt answered

I'm not sure if this is the best way, as there's tons of routes to do this it seems:

With AJAX and JQ, the page is never refreshed and it's a completely dynamic process. My page is still under construction, but can sample @ https://www.Throne-of-Lies.com

I have a register and login. Here is what I did, since the "quickstart" guides for this is EXTREMELY hard to find, even on Google (@Playfab staff -- perhaps you guys could write up a KB one day? Here is an ugly template):

REG

  1. We did this all using sweetalert2 popup with AJAX so users didn't have to leave the page @ http://limonte.github.io/sweetalert2/
  2. Initiate FB in your $.ready >> Optionally chain it to get info if already logged in with cookies (for login later) and 'remember me' checked
  3. Grab the javascript SDK from fb dev site
  4. Option to reg with FB or type in username/email/pass + humanity check (recaptcha)
  5. Press FB will request a FB session
  6. FB SESSION CALLBACK >> get FB info (scope email public profile names - this was TRICKY TO FIND HOW TO DO)
    FB.api('/me?fields=id,name,email,permissions', function(response) { ...
  7. Suggest a username as SirFirstName (or LadyFirstName if gender is female) and filling in the email and making it readonly. Hide recaptcha and show a label that fb is connected. They still have to enter a password. 
  8. Set a social flag for later
  9. Press submit and validate locally. Skip humanity checker. Validation took a while to code.
  10. POST RegisterPlayFabUser
  11. CALLBACK RegisterPlayFabUser >> Save Session info >> POST GetAccountInfo
  12. CALLBACK GetAccountInfo (playfab) >> (+code err handling) valid fb session && no fb link && social flag? Then LinkFacebookAccount
  13. CALLBACK LinkFacebookAccount >> (+code err handling) just console FYI - if it fails, I don't do anything since the account was already registered. They'll find out later it didn't work by FB, but will still use the FB email to fill in login field later.
  14. (Optional , post to mailchimp using ajax jsonp GET)
  15. Show success swal2
  16. Set UI
  17. Set fb dev options, go to approval, and set live!

TROUBLESHOOTING REG: Once you are almost done, you'll be in your "Players" account ready to change the email you just registered with over and over until you see a successful account linked. It's also nice to NOT change the email of your fb account reg to test errors on "email in use" or "username in use" handling.

LOGIN

  1. (on FB init, set cookie property, if you have cookies in your privacy policy)
  2. SWAL2 popup asking for username(OR)email, password, or FB signin btn and "remember me" optional chk
  3. FB signin, set social flag >> Get FB session
  4. CALLBACK FB session >> save session >> FB API to get FB info
  5. FB INFO CALLBACK >> save info >> if fb session >> POST LoginWithFacebook
  6. LOGINWITHFACEBOOK CALLBACK >> playfab session? Success >> GetAccountInfo (pfab)
  7. GETACCTINfO CALLBACK >> Save info for UI changes or whatever else you want to do
  8. Show swal2 success msg
  9. Set UI
  10. (COOKIES set with FB and they clicked "remember me" chkBox or something? Where FB inits, detect if there's already an approved "Connected" status -- if so, get fb acct info >> 
  11. FB ACCT INFO CALLBACK >> LoginWithFacebook (using the FB session ID) and repeat #5.
10 |1200

Up to 2 attachments (including images) can be used with a maximum of 512.0 KiB each and 1.0 MiB total.

Write an Answer

Hint: Notify or tag a user in this post by typing @username.

Up to 2 attachments (including images) can be used with a maximum of 512.0 KiB each and 1.0 MiB total.