Facebook or Google OAuth

[COMFIED 28]

Hi

 

I am looking for sample code for signing in via Facebook, Twitter or Google account to authorize app use.

[Niunio_Martinez 10]

I was looking for that too, but seems nobody did it yet (I hope I'm wrong).

Right now I'm playing with SMS IDE learning how it works (You know, one month to decide if buy a license or use free compiler instead).  If no body else does it in the while, then I'll do it because I need it in our next project.

[Dany 37]

OAuth 2.0:

 

http://hueniverse.com/2012/07/26/oauth-2-0-and-the-road-to-hell/

 

http://www.cnet.com/news/oauth-2-0-leader-resigns-says-standard-is-bad/

[Niunio_Martinez 10]

I see. But customer said it must have Facebook integration (sic.). It doesn't matter what we tell them about security and stuff:  they want Facebook so they'll have Facebook.

[Dany 37]

@Ñuño, yes. *That* is a "legitimate" reson! Good luck, /D

[CWBudde 160]

I just committed the TypeScript header translation for the FaceBook SDK. Maybe that helps.

 

You can find it at:

 

https://github.com/SmartMobileStudio/APIs/tree/master/Facebook

 

And the example about how to use it can be found here:

 

https://github.com/SmartMobileStudio/Examples/tree/master/Facebook%20SDK

 

Note: In order to test the login example make sure you have registered an app ID at Facebook. This ID must be supplied to the example and the code must be uploaded to the website URL specified. This makes testing not straight forward, but it's at least secure.

[jarto 724]

I thought I'd test this. When I try to compile, I get an error in FaceBook.SDK.pas:

Syntax Error: Class "JFBUIParams" isn't defined completely [line: 15, column: 35, file: FaceBook.SDK]

Edit: Got the SDK to compile by changing into this:

  JFBUIParams = class external
  end;

 

[jarto 724]

Yep, got it working nicely. I'm in the process of writing this into a non-visual component, which can be added to the component palette.

[jarto 724]

Does anyone have a working example of how to use Google's Sign-In api via their platform.js? I can find documentation and js code:

https://developers.google.com/identity/sign-in/web/sign-in

https://www.intricatecloud.io/2019/07/adding-google-sign-in-to-your-webapp-using-the-js-library/

...but as I'm not at all used to using promises, I feel there's quite a learning curve here for me. With a working example I could turn it into an easy-to-use component in no time.

[lynkfs 613]

is this helpful ?

 

[jarto 724]

@lynkfs It doesn't seem to use the platform api.

[lynkfs 613]

Works from server only, the one specified in the credentials page

var document external 'document': variant;
var console  external 'console':  variant;
var gapi     external 'gapi':     variant;

implementation

{ TForm1 }


procedure TForm1.InitializeForm;
begin
  inherited;
  // this is a good place to initialize components

  var Script := document.createElement('script');
  Script.src := 'https://apis.google.com/js/api.js';
  Script.setAttribute('async','');
  Script.setAttribute('defer','');
  document.head.appendChild(Script);
  Script.onload := procedure
  begin
    writeln('loaded');
    //
    // Load the API client and auth2 library
    gapi.load('auth2', procedure
    begin
      var mypromise : variant;
      mypromise := gapi.auth2.init(class
        clientId = '..........s0m9qrp8u2m6dcivi8p09tu5se.apps.googleusercontent.com';
      end);
      mypromise.then(procedure begin console.log(mypromise.isSignedIn.get()); end,
                     procedure begin console.log('error'); end);
    end);
  end;
end;

logs 'loaded' and 'true'

your other link does specify useful functions which can be added to the above

 

 

[jarto 724]

@lynkfs Oh, that helped so much! I've struggled at the concept of calling these external js apis when class references don't exists and also had no experience with using promises. But you helped me get going and now I'm making very good progress 🙂

Now I have TW3FacebookLogin- and TW3GoogleLogin-classes that both work. I'll have to read up a bit to add the necessary parameters (besides ClientId of the app), but I should be able to get them into alpha and component palette next week.

[lynkfs 613]

@jarto unearthed an interesting problem to do with promises

Basically the <promise>.then function has as parameters 2 call back functions. 
The first one will be executed on success, the second if there is an error.

mypromise.then(procedure begin ...success... end, procedure begin ...error... end)

This works fine. 

However defining these callbacks as regular external procedures and substituting these in the promise function call goes awfully wrong :

  procedure SuccessProc;
  begin
    writeln('success');
  end;

  mypromise.then(SuccessProc, ErrorProc);

This construct triggers BOTH of the async callbacks

Obviously not good.
This is either a subtle compiler problem or an elusive scope issue

A middle ground approach though works again as expected :

      SuccessProc :=  function(value:variant) : variant begin writeln('success'); end;
      ErrorProc   :=  function(value:variant) : variant begin writeln('error'); end;

      mypromise.then(procedure(Value: Variant) begin SuccessProc(Value) end, procedure(err: Variant) begin ErrorProc(err) end);

(here using the rtl-api-ecma-Ecma.promise unit) 

[jarto 724]

21 hours ago, lynkfs said:

This construct triggers BOTH of the async callbacks

I've been trying to search the internet for an explanation as the JS code produced looks like this:

mypromise.then(SuccessProc, ErrorProc);

[lynkfs 613]

Apparently the signature of the promise.then function (executor function) in the compiled js file needs to be exactly like this :

promise.then(function () {
   //console.log('success');      
}, function () {
   //console.log('error');     
})

As long as the compiler ejects this structure, it works fine

Probably other team members could shed some more light on this ?

[jarto 724]

1 hour ago, lynkfs said:

Apparently the signature of the promise.then function (executor function) in the compiled js file needs to be exactly like this :

promise.then(function () {
   //console.log('success');      
}, function () {
   //console.log('error');     
})

As long as the compiler ejects this structure, it works fine

Probably other team members could shed some more light on this ?

It doesn't have to be exactly like that. There can be differences in function parameters, but for sure, the functions need to be there.

I wonder if this is by design in JS.

[lynkfs 613]

thats what I think ...