Allows-pop up in custom UI

Forge Forge UI Kit and Custom UI
,
1

Hi everyone, I’m trying to integrate facebook login in custom UI forge using component from “react-facebook-login”. But when click login button I got console error log “Blocked opening ‘https://www.facebook.com/v2.3/dialog/…’ in a new window because the request was made in a sandboxed frame whose ‘allow-popups’ permission is not set.”. Thanks for helping me.

2

It sounds like you may need to use the Forge bridge’s open to kick off opening the new window:
https://developer.atlassian.com/platform/forge/custom-ui-bridge/router/#open

Also worth making sure that the external auth module isn’t useful to you: https://developer.atlassian.com/platform/forge/use-an-external-oauth-2.0-api-with-fetch/#define-the-provider

1 Like
3

Thanks for helping me, I’m trying to follow your solution, it seems your solution about providers can help me in this case. I have follow tutorials about external auth (google). But I still confused about how it can authenticate although I have logout my facebook account. Can you give me more advice? Here my manifest file:

modules:
  jira:projectSettingsPage:
    - key: facebook-integrations-hello-world
      function: main
      title: facebook-integrations
  function:
    - key: main
      handler: index.run
      providers:
        auth:
          - facebook
app:
  id: <my-app-id>
providers:
  auth:
  - key: facebook
    name: Facebook
    scopes:
      - email
      - public_profile
    type: oauth2
    clientId: <facebook-app-id>
    remotes:
      - facebook-apis
    bearerMethod: authorization-header
    actions:
      authorization:
        remote: facebook-oauth
        path: /oauth/access_token
        queryParameters:
          client_id: <facebook-app-id>
          client_secret: <facebook-client-id>
          grant_type: client_credentials
          response_type: token
      exchange:
        remote: facebook-oauth
        path: /oauth/access_token
        resolvers:
          accessToken: access_token
      retrieveProfile:
        remote: facebook-oauth
        path: /me/accounts
        resolvers:
          id: id
          displayName: name
remotes:
  - key: facebook-apis
    baseUrl: https://www.facebook.com/v14.0/dialog/oauth
  - key: facebook-oauth
    baseUrl: https://graph.facebook.com
permissions:
  content:
    styles:
      - 'unsafe-inline'
    scripts:
      - 'unsafe-inline'
      - 'unsafe-hashes'
  external:
    images:
      - '*'
    fetch:
      client:
        - '*'
      backend:
        - 'https://graph.facebook.com'
        - 'https://www.facebook.com/v14.0/dialog/oauth'

Thanks a lot.