Skip to main content

Need to Open the widget without login

Maria Rajiv

Need to enable the end user open the medialibrary without login. Currently if user clicks the openbtn button it asks for login. Below is the code block.

<script>
var ml = cloudinary.createMediaLibrary({
cloud_name: 'xxxxxx',
api_key: 'xxxxxxxxx',
username: 'xxxxxxxxx@gmail.com',
button_class: 'myBtn',
button_caption: 'Insert Images'
}, {
insertHandler: function (data) {
debugger;
data.assets.forEach(asset => {
if (asset.derived === undefined) {
document.getElementById("Url").value = asset.secure_url;
} else
{
document.getElementById("Url").value = asset.derived[0].secure_url;
}
});
}
},
document.getElementById("openbtn")
);

0
0

Comments

8 comments

Date Votes
  • Eyal Katz Talmon
    Edited

    Hi Maria, Thanks for reaching out!

    In general, all users need to be logged in order to make use of the media library widget.
    You can, however, implicitly log your users in when the widget opens, without them having to provide their credentials, in one of the two following ways -

    1. Add an authentication signature when initializing the widget - This way the widget would be configured to log in a specific user. The signature is hardcoded within the widget initialization code. This means that this specific widget instance would only be relevant for the specific user. This involves generating a SHA-256 signature, using your account secret and the widget parameters, and setting the widget's "signature" parameter to the generated signature.
      Additional information can be found here.
    2. Use SAML authentication - (Only available to premium plan customers) This way users can use SSO and be seamlessly logged in their account. Additional information can be found here.

    Note, that each user that accesses the media library requires a separate seat license.

    Hope this helps! Please let me know if you have any additional questions.

    0
  • Maria Rajiv

    Hi Eyal,

    I tried doing the same. But now I am getting another error Login failed Invalid Signature {{signature}}. String to sign - 'cloud_name={{cloudname}}&timestamp={{unixtimestamp now}}&username={{user}}{{secret key}}'.

    Encrypted the below text using SHA 256 to generate signature
    "cloud_name={{cloudname}}&timestamp={{unixtimestampnow}}&username={{user}}{{secret key}}"

     

    var ml = cloudinary.createMediaLibrary({
    cloud_name: 'xxxxx',
    api_key: 'xxxxxx',
    username: 'xxxxxxxx',
    timestamp: timestamp,
    signature: output,
    button_class: 'myBtn',
    button_caption: 'Insert Images'
    }, {
    insertHandler: function (data) {
    debugger;
    data.assets.forEach(asset => {
    if (asset.derived === undefined) {
    document.getElementById("Url").value = asset.secure_url;
    } else
    {
    document.getElementById("Url").value = asset.derived[0].secure_url;
    }
    });
    }
    },
    document.getElementById("openbtn")
    );

    0
  • Shirly Manor

    Hi Maria,

    Can you please make sure to send the API secret after the user name? It seems like we are not getting the API Secret in the string to sign.

    Please let us know if that helps,

    Shirly

    0
  • Maria Rajiv

    Hi Shirly,

    I have already generated the signature by encrypting the below text using SHA 256.

    'cloud_name={{cloudname}}&timestamp={{unixtimestamp now}}&username={{user}}{{secret key}}'

    Should I utilize the secret key any where else?

    Thanks

    0
  • Eyal Katz Talmon
    Edited

    Hi Maria, 

    When creating the signature, the string-to-sign should be appended with the API secret and not the API key. Can you try it with the secret and let me know if it works for you?

    If it does not help, in order for me to better understand the issue's origin, could you kindly provide the below information?

    • A code snippet of how you are generating the signature.
    • When generating the signature, did you make sure to digest the hash as 'hex'? 
    • Can you please confirm that the timestamp used to generate the signature is the same value as the timestamp parameter used to initialize the widget?

    Thanks!

    0
  • Maria Rajiv

    Hi Eyal,

    I have generated the signature using api secret only and not api key.

    Code Snippet

    1. var unixtimestampnow = Math.round((new Date()).getTime() /1000);

    2. Generated the signature  for text  'cloud_name={{cloudname}}&timestamp={{unixtimestampnow}}&username={{user}}{{apisecret}}' using the below C# code

    // Create a SHA256 hash from string
    using (SHA256 sha256Hash = SHA256.Create())
    {
    // Computing Hash - returns here byte array
    byte[] bytes = sha256Hash.ComputeHash(Encoding.UTF8.GetBytes(plainText));

    // now convert byte array to a string
    StringBuilder result = new StringBuilder();
    for (int i = 0; i < bytes.Length; i++)
    {
    result.Append(bytes[i].ToString("X2"));
    }
    return Json(result.ToString());

     

    For opening the widget

    var ml = cloudinary.createMediaLibrary({
    cloud_name: '{{cloudname}}',
    api_key: '{{apikey}}',
    username: '{{user}}',
    timestamp: {{unixtimestampnow}},
    signature: {{generated output from c# code}},
    button_class: 'myBtn',
    button_caption: 'Insert Images'
    }, {
    insertHandler: function (data) {
    debugger;
    data.assets.forEach(asset => {
    if (asset.derived === undefined) {
    document.getElementById("Url").value = asset.secure_url;
    } else
    {
    document.getElementById("Url").value = asset.derived[0].secure_url;
    }
    });
    }
    },
    document.getElementById("openbtn")
    );

    Let me know for any additional information.

    Thanks.

    0
  • Eyal Katz Talmon

    Hi Maria,

    I've tested your code and it looks fine.

    I do have an additional followup question - Because of the masked variables (e.g - {{unixtimestampnow}}, {{cloudname}}, etc.)  I cannot compare the string you're signing and the string stated in the error message you have received -

    "Login failed Invalid Signature {{signature}}. String to sign - 'cloud_name={{cloudname}}&timestamp={{unixtimestamp now}}&username={{user}}{{secret key}}'."

    Can you kindly confirm the strings are completely identical?
    If they are not, then you're signing an incorrect string.

    Thanks!

    0
  • Maria Rajiv

    Hi Eyal/Shirly,

    Thanks.

    Started the implementation once again from scratch. Its working fine.

    0

Post is closed for comments.

Didn't find what you were looking for?

New post